/**
 * Boost Look CSS Framework
 * Version: 1.0.0
 * Description: A comprehensive CSS framework for styling Boost C++ Library documentation
 * Author: Boost C++ Libraries
 * License: BSL-1.0
 */

/**
 * File Structure Overview:
 * 1. Root Variables (Light/Dark themes)
 * 2. HTML Variables
 * 3. Font-Face Declarations
 * 4. CSS Reset
 * 5. Global Styles for .boostlook
 * 6. Styling for Scrollbar Display
 * 7. AsciiDoctor-specific Styles
 * 8. Antora Templates Styles
 * 9. Quickbook Documentation Styles
 * 10. Library README Styles
 */

/**
 * Template Structure:
 * The framework supports these main documentation templates:
 *
 * 1. AsciiDoctor Template:
 * example: https://www.boost.io/doc/libs/1_87_0/libs/charconv/doc/html/charconv.html
 * <div class="boostlook">
 *   <div class="header">
 *     <h1>Title</h1>
 *     <div id="toc" class="toc2">
 *         <button id="toggle-toc">Show Table of Contents</button>
 *         <ul class="sectlevel1">TOC Links</ul>
 *     </div>
 *   </div>
 *   <div id="content">
 *     <div class="sect1">Content Sections</div>
 *   </div>
 *   <div id="footer">Footer Content</div>
 * </div>
 *
 * 2. Antora Template:
 * example: https://www.boost.io/doc/libs/1_87_0/doc/antora/url/index.html
 * <div class="boostlook">
 *   <div id="header">
 *     <div id="toc" class="nav-container toc2">Navigation</div>
 *   </div>
 *   <div id="content">
 *     <article class="doc max-width-reset">
 *       <div class="toolbar">Breadcrumbs and Spirit Nav</div>
 *       <h1>Title</h1>
 *       <div class="sect1">Content Sections</div>
 *     </article>
 *   </div>
 *   <div id="footer">Footer Content</div>
 * </div>
 *
 * 3. Quickbook Template:
 * example: https://www.boost.io/doc/libs/1_87_0/doc/html/accumulators.html
 * <div class="boostlook">
 *    <div class="spirit-nav">Navigation</div>
 *    <div class="chapter">  <!-- might also be .section, .refentry, .document, or .book -->
 *        <div class="titlepage">Title and information</div>
 *        <div class="toc">Table of Contents</div>
 *        <div class="section>Content</div>
 *        <div class="copyright-footer">Footer</div>
 *    </div>
 * </div>
 *
 * 4. README Template:
 * example: https://www.boost.io/library/1.87.0/beast/
 * <section id="libraryReadMe" class="boostlook">ReadMe Content</section>
 */

/**
 * Design Philosophy:
 * - Consistent styling across different documentation templates
 * - Responsive design with mobile-first approach
 * - Dark/Light theme support
 * - Accessible typography and color schemes
 * - Modern scrolling and navigation experience
 */

/**
 * Framework Selector Conventions
 *
 * The framework uses the following selector prefixes:
 *
 * 1. .boostlook
 *    - Primary selector for cross-template styles
 *    - Applies to all documentation formats
 *    - Used for common components and layouts
 *
 * 2. .boostlook:not(:has(.doc)),
 *    .boostlook#boost-legacy-docs-wrapper - (DEPRECATED),
 *    .boostlook#antora-template-wrapper,
 *    div.source-docs-antora.boostlook:not(:has(>.boostlook)) - (Fallback)
 *    - Specific to legacy Quickbook templates
 *    - Maintains backward compatibility
 *    - Handles specialized Quickbook formatting
 *
 * 3. .boostlook#libraryReadMe
 *    - Dedicated to README template styling
 *    - Optimized for library documentation
 *    - Ensures consistent README presentation
 */

/*----------------- Root Variables - Start -----------------*/

/* Root CSS Variables
 * Defines core design tokens used throughout the framework.
 * Organized into:
 * 1. General Variables - Global settings used across themes
 * 2. Color System - Comprehensive color palette including brand, state, and UI colors
 * 3. Typography - Font sizes, line heights, and text styling variables
 * 4. Spacing System - Padding, margins, and layout spacing tokens
 * 5. Icons - SVG icon definitions for light and dark themes
 * 6. Responsive Design - Mobile-first breakpoint variables
 */

:root {
  /* General Variables - Core design tokens for all themes */
  --bl-primary-color: rgb(255, 159, 0); /* Boost's signature orange color */

  /*----------------- New Look Variables Start -----------------*/
  /* New Look Primitives */
  /* Colors Shades of Grey */
  --colors-neutral-0: #ffffff;
  --colors-neutral-50: #f5f6f8;
  --colors-neutral-100: #e4e7ea;
  --colors-neutral-200: #c7cccf;
  --colors-neutral-300: #afb3b6;
  --colors-neutral-400: #949a9e;
  --colors-neutral-500: #798086;
  --colors-neutral-600: #62676b;
  --colors-neutral-700: #494d50;
  --colors-neutral-800: #393b3f;
  --colors-neutral-900: #18191b;
  --colors-neutral-950: #0d0e0f;

  /* Colors Brand Shades */
  --colors-brand-orange-50: #fbf2e6;
  --colors-brand-orange-100: #ffeaca;
  --colors-brand-orange-200: #ffd897;
  --colors-brand-orange-300: #ffc364;
  --colors-brand-orange-400: #ffb030;
  --colors-brand-orange-500: #ff9f00;
  --colors-brand-orange-600: #cd7e00;
  --colors-brand-orange-700: #9b5f00;
  --colors-brand-orange-800: #694000;
  --colors-brand-orange-900: #352000;
  --colors-brand-orange-950: #1e1200;

  /* Colors Negative Shades */
  --colors-negative-50: #fdf1f3ff;
  --colors-negative-100: #ffe6ea;
  --colors-negative-200: #ffcad2;
  --colors-negative-300: #fe9aab;
  --colors-negative-400: #f9677f;
  --colors-negative-500: #eb3856;
  --colors-negative-600: #bc233c;
  --colors-negative-700: #8d1529;
  --colors-negative-800: #600d1b;
  --colors-negative-900: #39070f;
  --colors-negative-950: #1d0408;

  /* Colors Positive Shades */
  --colors-positive-50: #f0fef7ff;
  --colors-positive-100: #def7eb;
  --colors-positive-200: #bdeed6;
  --colors-positive-300: #9ce6c2;
  --colors-positive-400: #7bddad;
  --colors-positive-500: #5ad599;
  --colors-positive-600: #48ac7b;
  --colors-positive-700: #36825d;
  --colors-positive-800: #255940;
  --colors-positive-850: #1c4431;
  --colors-positive-900: #132f22;
  --colors-positive-950: #0a1b13;

  /* Colors Warning Shades */
  --colors-warning-50: #fff8f3ff;
  --colors-warning-100: #ffefe2;
  --colors-warning-200: #ffd4b3;
  --colors-warning-300: #feb780;
  --colors-warning-400: #ff9442;
  --colors-warning-500: #fd760f;
  --colors-warning-600: #c25909;
  --colors-warning-700: #914104;
  --colors-warning-800: #5d2a02;
  --colors-warning-900: #341700;
  --colors-warning-950: #1f0e01;

  /* Colors Blue Shades */
  --colors-blue-25: #ebf4f9;
  --colors-blue-50: #daeef9;
  --colors-blue-100: #c2e2f4;
  --colors-blue-200: #92cbe9;
  --colors-blue-300: #62b3dd;
  --colors-blue-400: #329cd2;
  --colors-blue-500: #0284c7;
  --colors-blue-600: #026a9f;
  --colors-blue-700: #014f77;
  --colors-blue-800: #013550;
  --colors-blue-850: #01283c;
  --colors-blue-900: #001a28;
  --colors-blue-950: #000d14;

  /* Colors Code Syntax Pallette */
  --colors-code-colors-red: var(--colors-negative-400);
  --colors-code-colors-green: var(--colors-positive-500);
  --colors-code-colors-blue: var(--colors-blue-300);
  --colors-code-colors-black: var(--colors-neutral-950);
  --colors-code-colors-yellow: #ebc419;
  --colors-code-colors-purple: #b350ed;
  --colors-code-colors-turquoise: #67eaf9;
  --colors-code-colors-white: var(--colors-neutral-0);
  --colors-code-colors-red-contrast: var(--colors-negative-500);
  --colors-code-colors-green-contrast: var(--colors-positive-600);
  --colors-code-colors-blue-contrast: var(--colors-blue-400);
  --colors-code-colors-yellow-contrast: #d7a200;
  --colors-code-colors-purple-contrast: #9f26e5;
  --colors-code-colors-turquoise-contrast: #0dc4d5;
  --colors-code-colors-navy: #5469f7;
  --colors-code-colors-navy-contrast: #162ec6;

  /* Atom One Dark Theme Colors */
  --atom-one-dark-bg: #282c34;
  --atom-one-dark-text: #abb2bf;
  --atom-one-dark-comment: #5c6370;
  --atom-one-dark-keyword: #c678dd;
  --atom-one-dark-operator: #e06c75;
  --atom-one-dark-function: #61aeee;
  --atom-one-dark-string: #98c379;
  --atom-one-dark-variable: #d19a66;
  --atom-one-dark-constant: #56b6c2;
  --atom-one-dark-class: #e6c07b;

  /* Atom One Light Theme Colors */
  --atom-one-light-bg: #fafafa;
  --atom-one-light-text: #383a42;
  --atom-one-light-comment: #a0a1a7;
  --atom-one-light-keyword: #a626a4;
  --atom-one-light-operator: #e45649;
  --atom-one-light-function: #4078f2;
  --atom-one-light-string: #50a14f;
  --atom-one-light-variable: #986801;
  --atom-one-light-constant: #0184bb;
  --atom-one-light-class: #c18401;

  /* Colors Other */
  --colors-neutral-150: #d5d7d9;
  --colors-neutral-850: #2a2c30;
  --colors-overlay-overlay-white-40: rgba(255 255 255 / 0.4);
  --colors-overlay-overlay-black-40: rgba(13 14 15 / 0.4);
  --colors-overlay-overlay-white-64: rgba(255 255 255 / 0.64);
  --colors-overlay-overlay-black-64: rgba(13 14 15 / 0.64);
  --colors-overlay-overlay-white-88: rgba(255 255 255 / 0.88);
  --colors-overlay-overlay-black-88: rgba(13 14 15 / 0.88);

  /* Spacings And Sizes */
  --spacing-size-size-0: 0rem;
  --spacing-size-4xs: 0.125rem;
  --spacing-size-3xs: 0.25rem;
  --spacing-size-2xs: 0.5rem;
  --spacing-size-xs: 0.75rem;
  --spacing-size-sm: 1rem;
  --spacing-size-md: 1.125rem;
  --spacing-size-lg: 1.5rem;
  --spacing-size-xl: 2rem;
  --spacing-size-2xl: 2.5rem;
  --spacing-size-3xl: 3rem;
  --main-container: 90rem;

  /* New Look Typography */
  --font-family-body: "Noto Sans Display";
  --font-family-code: "Noto Sans Mono";
  --font-size-3xs: 0.625rem;
  --font-size-2xs: 0.75rem;
  --font-size-xs: 0.875rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-line-height-xs: 0.75rem;
  --font-line-height-sm: 1rem;
  --font-line-height-md: 1.25rem;
  --font-line-height-lg: 1.5rem;
  --font-line-height-xl: 1.75rem;
  --font-line-height-2xl: 2rem;
  --font-line-height-3xl: 2.5rem;
  --font-line-height-4xl: 3rem;

  /* New Look Icons */
  /* Themed Headings Anchor Icon */
  --icon-anchor-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_10452)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_10452%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
  --icon-anchor-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url(%23clip0_618_7189)%22%3E%3Cpath%20d%3D%22M13.2084%202.77855C11.8904%201.46053%209.75343%201.46053%208.43541%202.77855L6.31409%204.89987L5.4302%204.01599L7.55152%201.89467C9.3577%200.0884953%2012.2861%200.0884955%2014.0923%201.89467C15.8984%203.70085%2015.8984%206.62923%2014.0923%208.43541L11.9709%2010.5567L11.0871%209.67284L13.2084%207.55152C14.5264%206.2335%2014.5264%204.09657%2013.2084%202.77855Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M2.77855%2013.2084C4.09657%2014.5264%206.23351%2014.5264%207.55153%2013.2084L9.67285%2011.0871L10.5567%2011.9709L8.43541%2014.0923C6.62923%2015.8984%203.70085%2015.8984%201.89467%2014.0923C0.0884953%2012.2861%200.0884953%209.3577%201.89467%207.55152L4.01599%205.4302L4.89987%206.31409L2.77855%208.43541C1.46053%209.75343%201.46053%2011.8904%202.77855%2013.2084Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10.5567%206.31409C10.8008%206.07001%2010.8008%205.67428%2010.5567%205.4302C10.3126%205.18613%209.91692%205.18613%209.67284%205.4302L5.4302%209.67284C5.18613%209.91692%205.18613%2010.3127%205.4302%2010.5567C5.67428%2010.8008%206.07001%2010.8008%206.31409%2010.5567L10.5567%206.31409Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_618_7189%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");

  /* Themed Left Arrow Icon */
  --icon-arrow-left-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-left-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.5303%204.46967C12.8232%204.76256%2012.8232%205.23744%2012.5303%205.53033L6.81066%2011.25H19C19.4142%2011.25%2019.75%2011.5858%2019.75%2012C19.75%2012.4142%2019.4142%2012.75%2019%2012.75H6.81066L12.5303%2018.4697C12.8232%2018.7626%2012.8232%2019.2374%2012.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303L4.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Right Arrow Icon */
  --icon-arrow-right-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-right-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303L12.5303%2019.5303C12.2374%2019.8232%2011.7626%2019.8232%2011.4697%2019.5303C11.1768%2019.2374%2011.1768%2018.7626%2011.4697%2018.4697L17.1893%2012.75H5C4.58579%2012.75%204.25%2012.4142%204.25%2012C4.25%2011.5858%204.58579%2011.25%205%2011.25H17.1893L11.4697%205.53033C11.1768%205.23744%2011.1768%204.76256%2011.4697%204.46967Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Up Arrow Icon */
  --icon-arrow-up-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-arrow-up-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.5303%2012.5303C19.2374%2012.8232%2018.7626%2012.8232%2018.4697%2012.5303L12.75%206.81066L12.75%2019C12.75%2019.4142%2012.4142%2019.75%2012%2019.75C11.5858%2019.75%2011.25%2019.4142%2011.25%2019L11.25%206.81066L5.53033%2012.5303C5.23744%2012.8232%204.76256%2012.8232%204.46967%2012.5303C4.17678%2012.2374%204.17678%2011.7626%204.46967%2011.4697L11.4697%204.46967C11.7626%204.17678%2012.2374%204.17678%2012.5303%204.46967L19.5303%2011.4697C19.8232%2011.7626%2019.8232%2012.2374%2019.5303%2012.5303Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Clipboard Icon */
  --icon-clipboard-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-clipboard-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.8%203.75C4.52152%203.75%204.25445%203.86062%204.05754%204.05754C3.86062%204.25445%203.75%204.52152%203.75%204.8V12.9C3.75%2013.1785%203.86062%2013.4455%204.05754%2013.6425C4.25445%2013.8394%204.52152%2013.95%204.8%2013.95H5.7C6.11421%2013.95%206.45%2014.2858%206.45%2014.7C6.45%2015.1142%206.11421%2015.45%205.7%2015.45H4.8C4.1237%2015.45%203.4751%2015.1813%202.99688%2014.7031C2.51866%2014.2249%202.25%2013.5763%202.25%2012.9V4.8C2.25%204.1237%202.51866%203.4751%202.99688%202.99688C3.4751%202.51866%204.1237%202.25%204.8%202.25H12.9C13.5763%202.25%2014.2249%202.51866%2014.7031%202.99688C15.1813%203.4751%2015.45%204.1237%2015.45%204.8V5.7C15.45%206.11421%2015.1142%206.45%2014.7%206.45C14.2858%206.45%2013.95%206.11421%2013.95%205.7V4.8C13.95%204.52152%2013.8394%204.25445%2013.6425%204.05754C13.4455%203.86062%2013.1785%203.75%2012.9%203.75H4.8ZM11.1%2010.05C10.5201%2010.05%2010.05%2010.5201%2010.05%2011.1V19.2C10.05%2019.7799%2010.5201%2020.25%2011.1%2020.25H19.2C19.7799%2020.25%2020.25%2019.7799%2020.25%2019.2V11.1C20.25%2010.5201%2019.7799%2010.05%2019.2%2010.05H11.1ZM8.55%2011.1C8.55%209.69167%209.69167%208.55%2011.1%208.55H19.2C20.6083%208.55%2021.75%209.69167%2021.75%2011.1V19.2C21.75%2020.6083%2020.6083%2021.75%2019.2%2021.75H11.1C9.69167%2021.75%208.55%2020.6083%208.55%2019.2V11.1Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Home Icon */
  --icon-home-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1192%203.23498C11.177%202.24329%2012.823%202.24329%2013.8808%203.23498L19.8808%208.85998C20.4354%209.37986%2020.75%2010.1061%2020.75%2010.8662V18.9997C20.75%2019.9662%2019.9665%2020.7497%2019%2020.7497H15C14.5858%2020.7497%2014.25%2020.414%2014.25%2019.9997V15.9998C14.25%2015.8617%2014.1381%2015.7498%2014%2015.7498H10C9.86193%2015.7498%209.75%2015.8617%209.75%2015.9998V19.9997C9.75%2020.414%209.41421%2020.7497%209%2020.7497H5C4.0335%2020.7497%203.25%2019.9662%203.25%2018.9997V10.8662C3.25%2010.1061%203.56462%209.37986%204.11916%208.85998L10.1192%203.23498ZM12.8549%204.32929C12.3741%203.87852%2011.6259%203.87852%2011.1451%204.32929L5.14507%209.95429C4.89301%2010.1906%204.75%2010.5207%204.75%2010.8662V18.9997C4.75%2019.1378%204.86193%2019.2497%205%2019.2497H8.25V15.9998C8.25%2015.0333%209.0335%2014.2498%2010%2014.2498H14C14.9665%2014.2498%2015.75%2015.0333%2015.75%2015.9998V19.2497H19C19.1381%2019.2497%2019.25%2019.1378%2019.25%2018.9997V10.8662C19.25%2010.5207%2019.107%2010.1906%2018.8549%209.95429L12.8549%204.32929Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-home-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1192%203.23523C11.177%202.24353%2012.823%202.24353%2013.8808%203.23523L19.8808%208.86023C20.4354%209.38011%2020.75%2010.1063%2020.75%2010.8665V19C20.75%2019.9665%2019.9665%2020.75%2019%2020.75H15C14.5858%2020.75%2014.25%2020.4142%2014.25%2020V16C14.25%2015.8619%2014.1381%2015.75%2014%2015.75H10C9.86193%2015.75%209.75%2015.8619%209.75%2016V20C9.75%2020.4142%209.41421%2020.75%209%2020.75H5C4.0335%2020.75%203.25%2019.9665%203.25%2019V10.8665C3.25%2010.1063%203.56462%209.38011%204.11916%208.86023L10.1192%203.23523ZM12.8549%204.32953C12.3741%203.87876%2011.6259%203.87876%2011.1451%204.32953L5.14507%209.95453C4.89301%2010.1908%204.75%2010.5209%204.75%2010.8665V19C4.75%2019.1381%204.86193%2019.25%205%2019.25H8.25V16C8.25%2015.0335%209.0335%2014.25%2010%2014.25H14C14.9665%2014.25%2015.75%2015.0335%2015.75%2016V19.25H19C19.1381%2019.25%2019.25%2019.1381%2019.25%2019V10.8665C19.25%2010.5209%2019.107%2010.1908%2018.8549%209.95453L12.8549%204.32953Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* Themed File Icon */
  --icon-file-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%2362676B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%2362676B%22%2F%3E%3C%2Fsvg%3E");
  --icon-file-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M5%2011.5H10V10.5H5V11.5Z%22%20fill%3D%22%23949A9E%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4%201.5C3.17157%201.5%202.5%202.17157%202.5%203V13C2.5%2013.8284%203.17157%2014.5%204%2014.5H12C12.8284%2014.5%2013.5%2013.8284%2013.5%2013V6.41421C13.5%206.01639%2013.342%205.63486%2013.0607%205.35355L9.64645%201.93934C9.36514%201.65803%208.98361%201.5%208.58579%201.5H4ZM3.5%203C3.5%202.72386%203.72386%202.5%204%202.5H8.58579C8.71839%202.5%208.84557%202.55268%208.93934%202.64645L12.3536%206.06066C12.4473%206.15443%2012.5%206.28161%2012.5%206.41421V13C12.5%2013.2761%2012.2761%2013.5%2012%2013.5H4C3.72386%2013.5%203.5%2013.2761%203.5%2013V3Z%22%20fill%3D%22%23949A9E%22%2F%3E%3C%2Fsvg%3E");

  /* Themed Menu Icon */
  --icon-menu-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22%2318191B%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22%2318191B%22%2F%3E%3C%2Fsvg%3E");
  --icon-menu-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%206C3.55228%206%204%205.55228%204%205C4%204.44772%203.55228%204%203%204C2.44772%204%202%204.44772%202%205C2%205.55228%202.44772%206%203%206Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%205.75H6V4.25H22V5.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M22%2012.75H6V11.25H22V12.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M16%2019.75H6V18.25H16V19.75Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M4%2012C4%2012.5523%203.55228%2013%203%2013C2.44772%2013%202%2012.5523%202%2012C2%2011.4477%202.44772%2011%203%2011C3.55228%2011%204%2011.4477%204%2012Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M3%2020C3.55228%2020%204%2019.5523%204%2019C4%2018.4477%203.55228%2018%203%2018C2.44772%2018%202%2018.4477%202%2019C2%2019.5523%202.44772%2020%203%2020Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");

  /* New Look Responsive Mobile First */
  /* Spacing */
  --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
  --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
  --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
  --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
  --padding-padding-lg: var(--spacing-size-md);
  --padding-padding-sm: var(--spacing-size-xs);
  --padding-padding-xs: var(--spacing-size-xs);
  --padding-padding-2xs: var(--spacing-size-2xs);
  --padding-padding-3xs: var(--spacing-size-3xs);
  --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
  --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
  --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
  --padding-padding-md: var(--spacing-size-sm);
  --main-margin: var(--spacing-size-sm);
  --main-max-width-leftbar: 0rem;
  --main-content-width: 54rem;
  --icons-24: 1.5rem;
  --icons-20: 1.25rem;
  --icons-16: 1rem;
  --icons-12: 0.75rem;

  /* Typography */
  --typography-font-size-3xs: var(--font-size-3xs);
  --typography-font-size-2xs: var(--font-size-2xs);
  --typography-font-size-xs: var(--font-size-xs);
  --typography-font-size-sm: var(--font-size-xs);
  --typography-font-size-md: var(--font-size-sm);
  --typography-font-size-lg: var(--font-size-md);
  --typography-font-size-xl: var(--font-size-lg);
  --typography-font-size-2xl: var(--font-size-xl);
  --typography-font-size-3xl: var(--font-size-2xl);
  --typography-font-size-4xl: var(--font-size-3xl);
  --typography-line-height-xs: var(--font-line-height-xs);
  --typography-line-height-sm: var(--font-line-height-sm);
  --typography-line-height-md: var(--font-line-height-md);
  --typography-line-height-lg: var(--font-line-height-md);
  --typography-line-height-xl: var(--font-line-height-lg);
  --typography-line-height-2xl: var(--font-line-height-lg);
  --typography-line-height-3xl: var(--font-line-height-2xl);
  --typography-line-height-4xl: var(--font-line-height-3xl);
  /*----------------- New Look Variables End -----------------*/
}

/*----------------- New Look Responsive Desktop Start -----------------*/
@media (min-width: 768px) {
  :root {
    /* Spacing */
    --leftbar-paddings-leftbar-padding-sm: var(--spacing-size-sm);
    --leftbar-paddings-leftbar-padding-md: var(--spacing-size-md);
    --leftbar-paddings-leftbar-padding-0: var(--spacing-size-size-0);
    --leftbar-paddings-leftbar-padding-lg: var(--spacing-size-lg);
    --padding-padding-lg: var(--spacing-size-lg);
    --padding-padding-sm: var(--spacing-size-sm);
    --padding-padding-xs: var(--spacing-size-xs);
    --padding-padding-2xs: var(--spacing-size-2xs);
    --padding-padding-3xs: var(--spacing-size-3xs);
    --leftbar-paddings-leftbar-padding-4xs: var(--spacing-size-4xs);
    --leftbar-paddings-leftbar-padding-2xs: var(--spacing-size-2xs);
    --leftbar-paddings-leftbar-padding-3xs: var(--spacing-size-3xs);
    --padding-padding-md: var(--spacing-size-md);
    --main-margin: var(--spacing-size-xl);
    --main-max-width-leftbar: 18.25rem;
    --icons-24: 1.5rem;
    --icons-20: 1.25rem;
    --icons-16: 1rem;
    --icons-12: 0.75rem;

    /* Typography */
    --typography-font-size-3xs: var(--font-size-3xs);
    --typography-font-size-2xs: var(--font-size-2xs);
    --typography-font-size-xs: var(--font-size-xs);
    --typography-font-size-sm: var(--font-size-sm);
    --typography-font-size-md: var(--font-size-md);
    --typography-font-size-lg: var(--font-size-lg);
    --typography-font-size-xl: var(--font-size-xl);
    --typography-font-size-2xl: var(--font-size-2xl);
    --typography-font-size-3xl: var(--font-size-3xl);
    --typography-font-size-4xl: var(--font-size-4xl);
    --typography-line-height-xs: var(--font-line-height-xs);
    --typography-line-height-sm: var(--font-line-height-sm);
    --typography-line-height-md: var(--font-line-height-md);
    --typography-line-height-lg: var(--font-line-height-lg);
    --typography-line-height-xl: var(--font-line-height-xl);
    --typography-line-height-2xl: var(--font-line-height-2xl);
    --typography-line-height-3xl: var(--font-line-height-3xl);
    --typography-line-height-4xl: var(--font-line-height-4xl);
  }
}

@media (min-width: 990px) {
  :root {
    --main-max-width-leftbar: 21.25rem;
    --main-margin: var(--spacing-size-3xl);
  }
}

/*----------------- New Look Responsive Desktop End -----------------*/

/*----------------- Root Variables - End -----------------*/

/*----------------- HTML Variables - Start -----------------*/

/**
 * HTML Theme Variables
 * These variables are applied to the HTML element and control the active theme.
 * The framework supports two themes:
 * 1. Light Theme (default)
 * 2. Dark Theme (activated by html.dark class)
 */

/* Light Theme (Default) Configuration */
html {
  /*----------------- New Look Variables Start -----------------*/
  --icon-anchor: var(--icon-anchor-light);
  --icon-arrow-left: var(--icon-arrow-left-light);
  --icon-arrow-right: var(--icon-arrow-right-light);
  --icon-arrow-up: var(--icon-arrow-up-light);
  --icon-clipboard: var(--icon-clipboard-light);
  --icon-home: var(--icon-home-light);
  --icon-file: var(--icon-file-light);
  --icon-menu: var(--icon-menu-light);

  --text-buttons-button-label-primary-default: var(--colors-neutral-0);
  --text-buttons-button-label-secondary-default: var(--colors-neutral-900);
  --text-buttons-button-label-inactive: var(--colors-neutral-500);

  --text-main-text-primary: var(--colors-neutral-900);
  --text-main-text-link-blue-secondary: var(--colors-blue-500);
  --text-main-text-link-blue-tetriary: var(--colors-blue-400);
  --text-main-text-body-secondary: var(--colors-neutral-700);
  --text-main-text-body-quaternary: var(--colors-neutral-400);
  --text-main-text-body-tetriary: var(--colors-neutral-600);
  --text-main-text-body-primary: var(--colors-neutral-850);
  --text-main-text-link-blue: var(--colors-blue-600);

  --text-states-text-warning-tetriary: var(--colors-warning-600);
  --text-states-text-warning-secondary: var(--colors-warning-500);
  --text-states-text-positive-secondary: var(--colors-positive-500);
  --text-states-text-positive-tetriary: var(--colors-positive-600);
  --text-states-text-negative-secondary: var(--colors-negative-500);
  --text-states-text-negative-tetriary: var(--colors-negative-600);
  --text-states-text-warning: var(--colors-warning-400);
  --text-states-text-positive: var(--colors-positive-400);
  --text-states-text-negative: var(--colors-negative-400);
  --text-states-text-additional: var(--colors-blue-400);
  --text-states-text-additional-secondary: var(--colors-blue-500);
  --text-states-text-additional-tetriary: var(--colors-blue-600);

  --text-code-red: var(--atom-one-light-operator);
  --text-code-green: var(--atom-one-light-string);
  --text-code-blue: var(--atom-one-light-function);
  --text-code-yellow: var(--atom-one-light-variable);
  --text-code-purple: var(--atom-one-light-keyword);
  --text-code-turquoise: var(--atom-one-light-constant);
  --text-code-neutral: var(--atom-one-light-text);
  --text-code-navy: var(--atom-one-light-class);

  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-400);
  --surface-button-button-bg-primary-default: var(--colors-blue-700);
  --surface-button-button-bg-primary-pressed: var(--colors-blue-700);
  --surface-button-button-bg-primary-inactive: var(--colors-neutral-200);
  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-500);
  --surface-button-button-bg-primary-hover: var(--colors-blue-800);
  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-400);
  --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-200);

  --surface-background-main-base-primary: var(--colors-neutral-0);
  --surface-background-main-surface-primary: var(--colors-neutral-50);
  --surface-background-main-surface-secondary: var(--colors-neutral-100);
  --surface-background-main-surface-tetriary: var(--colors-neutral-150);
  --surface-background-main-surface-blue-primary: var(--colors-blue-25);
  --surface-background-main-surface-blue-secondary: var(--colors-blue-50);
  --surface-background-main-surface-blue-tetriary: var(--colors-blue-100);
  --surface-background-main-surface-blue-quaternary: var(--colors-blue-200);
  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-white-64);
  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-black-40);
  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-white-88);

  --surface-background-states-surface-warning-primary: var(--colors-warning-50);
  --surface-background-states-surface-warning-secondary: var(--colors-warning-100);
  --surface-background-states-surface-warning-tetriary: var(--colors-warning-200);
  --surface-background-states-surface-warning-quaternary: var(--colors-warning-300);
  --surface-background-states-surface-positive-primary: var(--colors-positive-50);
  --surface-background-states-surface-positive-secondary: var(--colors-positive-100);
  --surface-background-states-surface-positive-tetriary: var(--colors-positive-200);
  --surface-background-states-surface-positive-quaternary: var(--colors-positive-300);
  --surface-background-states-surface-negative-primary: var(--colors-negative-50);
  --surface-background-states-surface-negative-secondary: var(--colors-negative-100);
  --surface-background-states-surface-negative-tetriary: var(--colors-negative-200);
  --surface-background-states-surface-negative-quaternary: var(--colors-negative-300);
  --surface-background-states-surface-additional-secondary: var(--colors-blue-100);
  --surface-background-states-surface-additional-tetriary: var(--colors-blue-200);
  --surface-background-states-surface-additional-quaternary: var(--colors-blue-300);

  --surface-icons-icon-primary: var(--colors-neutral-900);
  --surface-icons-icon-button-primary: var(--colors-neutral-0);
  --surface-icons-icon-button-secondary: var(--colors-neutral-900);
  --surface-icons-icon-button-inactive: var(--colors-neutral-500);
  --surface-icons-icon-secondary: var(--colors-neutral-600);
  --surface-icons-icon-quaternary: var(--colors-neutral-200);
  --surface-icons-icon-cta: var(--colors-brand-orange-500);
  --surface-icons-icon-hover: var(--colors-brand-orange-400);
  --surface-icons-icon-tetriary: var(--colors-neutral-400);
  --surface-icons-icon-warning: var(--colors-warning-600);
  --surface-icons-icon-positive: var(--colors-positive-600);
  --surface-icons-icon-negative: var(--colors-negative-600);
  --surface-icons-icon-brand-orange: var(--colors-brand-orange-600);
  --surface-icons-icon-blue: var(--colors-blue-600);
  --surface-icons-icon-blue-light: var(--colors-blue-200);

  --border-border-primary: var(--colors-neutral-100);
  --border-border-secondary: var(--colors-neutral-150);
  --border-border-tetriary: var(--colors-neutral-300);
  --border-border-quaternary: var(--colors-neutral-600);
  --border-border-active: var(--colors-neutral-900);
  --border-border-brand-orange: var(--colors-brand-orange-200);
  --border-border-warning: var(--colors-warning-200);
  --border-border-positive: var(--colors-positive-200);
  --border-border-negative: var(--colors-negative-200);
  --border-border-blue: var(--colors-blue-200);
  --border-border-blue-primary: var(--colors-blue-100);
  --border-border-blue-hover: var(--colors-blue-400);

  /*----------------- New Look Variables End -----------------*/
}

/* Dark Theme Configuration */
html.dark {
  /*----------------- New Look Variables Dark Mode Start -----------------*/
  --icon-anchor: var(--icon-anchor-dark);
  --icon-arrow-left: var(--icon-arrow-left-dark);
  --icon-arrow-right: var(--icon-arrow-right-dark);
  --icon-arrow-up: var(--icon-arrow-up-dark);
  --icon-clipboard: var(--icon-clipboard-dark);
  --icon-home: var(--icon-home-dark);
  --icon-file: var(--icon-file-dark);
  --icon-menu: var(--icon-menu-dark);

  --text-buttons-button-label-primary-default: var(--colors-neutral-0);
  --text-buttons-button-label-secondary-default: var(--colors-neutral-950);
  --text-buttons-button-label-inactive: var(--colors-neutral-500);

  --text-main-text-primary: var(--colors-neutral-0);
  --text-main-text-link-blue-secondary: var(--colors-blue-500);
  --text-main-text-link-blue-tetriary: var(--colors-blue-600);
  --text-main-text-link-blue: var(--colors-blue-400);
  --text-main-text-body-secondary: var(--colors-neutral-200);
  --text-main-text-body-tetriary: var(--colors-neutral-300);
  --text-main-text-body-quaternary: var(--colors-neutral-600);
  --text-main-text-body-primary: var(--colors-neutral-50);

  --text-states-text-warning-tetriary: var(--colors-warning-400);
  --text-states-text-warning-secondary: var(--colors-warning-500);
  --text-states-text-warning: var(--colors-warning-600);
  --text-states-text-positive-secondary: var(--colors-positive-500);
  --text-states-text-positive-tetriary: var(--colors-positive-400);
  --text-states-text-positive: var(--colors-positive-600);
  --text-states-text-negative-secondary: var(--colors-negative-500);
  --text-states-text-negative-tetriary: var(--colors-negative-400);
  --text-states-text-negative: var(--colors-negative-600);
  --text-states-text-additional: var(--colors-blue-600);
  --text-states-text-additional-secondary: var(--colors-blue-500);
  --text-states-text-additional-tetriary: var(--colors-blue-400);

  --text-code-red: var(--atom-one-dark-operator);
  --text-code-green: var(--atom-one-dark-string);
  --text-code-blue: var(--atom-one-dark-function);
  --text-code-yellow: var(--atom-one-dark-variable);
  --text-code-purple: var(--atom-one-dark-keyword);
  --text-code-turquoise: var(--atom-one-dark-constant);
  --text-code-neutral: var(--atom-one-dark-text);
  --text-code-navy: var(--atom-one-dark-class);

  --surface-button-button-bg-secondary-ta-default: var(--colors-brand-orange-500);
  --surface-button-button-bg-primary-default: var(--colors-blue-800);
  --surface-button-button-bg-primary-pressed: var(--colors-blue-800);
  --surface-button-button-bg-primary-inactive: var(--colors-neutral-800);
  --surface-button-button-bg-secondary-cta-hover: var(--colors-brand-orange-400);
  --surface-button-button-bg-primary-hover: var(--colors-blue-700);
  --surface-button-button-bg-secondary-cta-pressed: var(--colors-brand-orange-500);
  --surface-button-button-bg-secondary-cta-inactive: var(--colors-neutral-800);

  --surface-background-main-base-primary: var(--colors-neutral-950);
  --surface-background-main-surface-primary: var(--colors-neutral-900);
  --surface-background-main-surface-secondary: var(--colors-neutral-850);
  --surface-background-main-surface-tetriary: var(--colors-neutral-800);
  --surface-background-main-surface-blue-primary: var(--colors-blue-900);
  --surface-background-main-surface-blue-secondary: var(--colors-blue-900);
  --surface-background-main-surface-blue-tetriary: var(--colors-blue-850);
  --surface-background-main-surface-blue-quaternary: var(--colors-blue-800);
  --surface-background-main-surface-transparent: var(--colors-overlay-overlay-black-64);
  --surface-background-main-surface-transparent-inverse: var(--colors-overlay-overlay-white-40);
  --surface-background-main-surface-transparent-secondary: var(--colors-overlay-overlay-black-88);

  --surface-background-states-surface-warning-primary: var(--colors-warning-950);
  --surface-background-states-surface-warning-secondary: var(--colors-warning-950);
  --surface-background-states-surface-warning-tetriary: var(--colors-warning-800);
  --surface-background-states-surface-warning-quaternary: var(--colors-warning-700);
  --surface-background-states-surface-positive-primary: var(--colors-positive-950);
  --surface-background-states-surface-positive-secondary: var(--colors-positive-950);
  --surface-background-states-surface-positive-tetriary: var(--colors-positive-800);
  --surface-background-states-surface-positive-quaternary: var(--colors-positive-700);
  --surface-background-states-surface-negative-primary: var(--colors-negative-950);
  --surface-background-states-surface-negative-secondary: var(--colors-negative-950);
  --surface-background-states-surface-negative-tetriary: var(--colors-negative-800);
  --surface-background-states-surface-negative-quaternary: var(--colors-negative-700);
  --surface-background-states-surface-additional-secondary: var(--colors-blue-950);
  --surface-background-states-surface-additional-tetriary: var(--colors-blue-800);
  --surface-background-states-surface-additional-quaternary: var(--colors-blue-700);

  --surface-icons-icon-primary: var(--colors-neutral-0);
  --surface-icons-icon-button-primary: var(--colors-neutral-0);
  --surface-icons-icon-button-secondary: var(--colors-neutral-950);
  --surface-icons-icon-button-inactive: var(--colors-neutral-600);
  --surface-icons-icon-secondary: var(--colors-neutral-400);
  --surface-icons-icon-quaternary: var(--colors-neutral-600);
  --surface-icons-icon-cta: var(--colors-brand-orange-500);
  --surface-icons-icon-hover: var(--colors-brand-orange-600);
  --surface-icons-icon-warning: var(--colors-warning-400);
  --surface-icons-icon-positive: var(--colors-positive-400);
  --surface-icons-icon-negative: var(--colors-negative-400);
  --surface-icons-icon-brand-orange: var(--colors-brand-orange-400);
  --surface-icons-icon-blue: var(--colors-blue-400);
  --surface-icons-icon-blue-light: var(--colors-blue-700);

  --border-border-primary: var(--colors-neutral-850);
  --border-border-secondary: var(--colors-neutral-800);
  --border-border-tetriary: var(--colors-neutral-700);
  --border-border-quaternary: var(--colors-neutral-500);
  --border-border-active: var(--colors-neutral-0);
  --border-border-brand-orange: var(--colors-brand-orange-900);
  --border-border-warning: var(--colors-warning-800);
  --border-border-positive: var(--colors-positive-800);
  --border-border-negative: var(--colors-negative-800);
  --border-border-blue: var(--colors-blue-700);
  --border-border-blue-primary: var(--colors-blue-850);
  --border-border-blue-hover: var(--colors-blue-500);

  /*----------------- New Look Variables Dark Mode Start -----------------*/
}

/*----------------- HTML Variables - End -----------------*/

/* Override for Antora default styles */
html:has(.boostlook) {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1rem;
  height: 100%;
  scroll-behavior: smooth;
}

/*----------------- Font-Face Declarations start -----------------*/

/**
 * Typography Configuration
 * The framework uses Noto Sans family as its primary font system:
 * 1. Noto Sans Display: Main text font with variable weight support
 * 2. Noto Sans Mono: Monospace font for code blocks
 *
 * Font Loading Strategy:
 * - Multiple source paths for resilient loading
 * - Variable fonts for optimal performance
 * - Font-display: block to prevent FOIT (Flash of Invisible Text)
 */

/* Noto Sans Display - Regular */
@font-face {
  font-family: "Noto Sans Display";
  font-style: normal;
  font-weight: 100 900;
  /* Variable font weight range */
  font-variation-settings: "wght" 400;
  font-stretch: semi-condensed;
  font-display: block;
  /* Prevents FOIT */
  src: url("/static/font/notosans.woff2") format("woff2"),
  url("../../../../tools/boostlook/NotoSansDisplay.ttf") format("truetype"),
    url("https://cppalliance.org/fonts/NotoSansDisplay.ttf") format("truetype");
}

/* Noto Sans Display - Italic */
@font-face {
  font-family: "Noto Sans Display";
  font-style: italic;
  font-weight: 100 900;
  /* Variable font weight range */
  font-variation-settings: "wght" 400;
  font-stretch: semi-condensed;
  font-display: block;
  /* Prevents FOIT */
  src: url("/static/font/notosans_mono_ext.woff") format("woff"),
  url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
    url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype");
}

/* Noto Sans Mono - Variable Weight */
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 100 900;
  /* Variable font weight range */
  font-variation-settings: "wght" 400;
  font-stretch: semi-condensed;
  font-display: block;
  /* Prevents FOIT */
  src: url("/static/font/notosans_mono.woff") format("woff"),
  url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
    url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype");
}

/* Noto Sans Mono - Fixed Weight */
@font-face {
  font-family: "Noto Sans Mono";
  font-style: normal;
  font-weight: 400;
  /* Fixed weight for specific use cases */
  font-stretch: ultra-condensed;
  font-display: block;
  /* Prevents FOIT */
  src: url("/_/boostlook/NotoSansMono.ttf") format("truetype"), url("../../../../tools/boostlook/NotoSansMono.ttf") format("truetype"),
    url("https://cppalliance.org/fonts/NotoSansMono.ttf") format("truetype");
}

/*----------------- Font-Face Declarations end -----------------*/

/*----------------- CSS Reset start -----------------*/

/**
 * Modern CSS Reset
 * A minimal CSS reset that:
 * 1. Uses the modern box-sizing model
 * 2. Removes default margins
 * 3. Improves text rendering
 * 4. Ensures responsive media elements
 * 5. Normalizes form elements
 * 6. Prevents text overflow issues
 * 7. Provides a proper stacking context
 * 8. Resets legacy table and adjacent element styles
 */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
}

html body {
  margin: 0;
}

/* Body defaults */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  /* Improves text rendering on WebKit */
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  /* Responsive media elements */
}

/* Form elements */
input,
button,
textarea,
select {
  font: inherit;
  /* Inherit typography */
}

/* Text elements */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  /* Prevent text overflow */
}

body :not(pre):not([class^="L"]) > code {
  /* ovverrides builtin colors */
  color: var(--text-code-neutral, #0d0e0f);
}

/* Stacking context */
#root,
#__next {
  isolation: isolate;
  /* Create new stacking context */
}

/* Reset Legacy Table and Next to Table Element Styles */
.boostlook .tablecontainer,
.boostlook .tablecontainer + *,
.boostlook :not(.tablecontainer) > table.tableblock,
.boostlook :not(.tablecontainer) > table.tableblock + *,
.boostlook .doc .tablecontainer,
.boostlook .doc .tablecontainer + *,
.boostlook .doc :not(.tablecontainer) > table.tableblock,
.boostlook .doc :not(.tablecontainer) > table.tableblock + *,
.boostlook.boostlook:not(:has(.doc)) table.table,
.boostlook.boostlook:not(:has(.doc)) table.table + * {
  margin: revert;
}

.boostlook .underline:has(> code:only-child) {
  text-decoration-line: none;
}

/*----------------- CSS Reset end -----------------*/

/*----------------- Global Styles for .boostlook start -----------------*/

/**
 * Global Styles for .boostlook
 * Core styles that apply to all .boostlook containers regardless of template.
 * These styles establish:
 * 1. Base container styling
 * 2. Typography hierarchy and spacing
 * 3. Link appearances and interactions
 * 4. Code block formatting and syntax highlighting
 * 5. List and table styles
 * 6. Special block elements (quotes, admonitions, etc.)
 * 7. Pagination and navigation elements
 * 8. Layout structure and spacing
 */

/* Base Container */
.boostlook {
  font-family: "Noto Sans Display" !important;
  font-stretch: 100%;
  background: var(--surface-background-main-base-primary, #fff);
}

/* Typography Hierarchy
 * Establishes consistent heading sizes and spacing
 * while maintaining proper visual hierarchy
 */
.boostlook h1,
.boostlook .doc h1,
.boostlook h2,
.boostlook .doc h2,
.boostlook h3,
.boostlook .doc h3,
.boostlook h4,
.boostlook .doc h4,
.boostlook h5,
.boostlook .doc h5,
.boostlook h6,
.boostlook .doc h6 {
  color: var(--text-main-text-primary, #18191b);
  display: block;
  line-height: var(--typography-line-height-xl, 1.75rem);
  margin-top: var(--padding-padding-md, 1.125rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  margin-bottom: 0.5rem;
  font-weight: 500;
  position: relative;
}

/* Heading Sizes */
.boostlook h1,
.boostlook .doc h1 {
  font-size: var(--typography-font-size-2xl, 1.75rem);
  line-height: var(--typography-line-height-3xl, 2.5rem); /* 142.857% */
}

/* Primary headings */
.boostlook h2,
.boostlook .doc h2 {
  font-size: var(--typography-font-size-lg, 1.25rem);
}

/* Section headings */
.boostlook h3,
.boostlook .doc h3 {
  font-size: var(--typography-font-size-md, 1.125rem);
  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
}

/* Subsection headings */
.boostlook h4,
.boostlook .doc h4 {
  font-size: var(--font-size-sm, 1rem);
  line-height: var(--font-line-height-lg, 1.5rem);
}

/* Topic headings */
.boostlook h5,
.boostlook .doc h5 {
  font-size: var(--font-size-xs, 0.875rem);
  line-height: var(--font-line-height-md, 1.25rem);
}

/* Subtopic headings */
.boostlook h6,
.boostlook .doc h6 {
  font-size: var(--font-size-xs, 0.875rem);
  line-height: var(--font-line-height-md, 1.25rem);
}

/* Document-specific headings adjustments */
.boostlook .doc h2:not(.discrete) {
  /* website-v2-doc styles overrides */
  margin-left: 0;
  padding-left: 0;
  border-bottom: revert;
  margin-right: revert;
  padding: revert;
}

.boostlook h2:has(+ .sectionbody > .sect2:first-child > h3),
.boostlook .doc h2:has(+ .sectionbody > .sect2:first-child > h3) {
  margin-bottom: 0;
}

.boostlook h3:has(+ .sect3 > h4:first-child),
.boostlook .doc h2:has(+ .sect3 > h4:first-child) {
  margin-bottom: 0;
}

/* Override default docs site css */
.boostlook .doc .dlist,
.boostlook .doc .exampleblock,
.boostlook .doc .hdlist,
.boostlook .doc .imageblock,
.boostlook .doc .listingblock,
.boostlook .doc .literalblock,
.boostlook .doc .olist,
.boostlook .doc .paragraph,
.boostlook .doc .partintro,
.boostlook .doc .quoteblock,
.boostlook .doc .sidebarblock,
.boostlook .doc .tabs,
.boostlook .doc .ulist,
.boostlook .doc .verseblock,
.boostlook .doc .videoblock,
.boostlook .doc details,
.boostlook .doc hr {
  margin: revert;
}

/* Anchor positioning within headings */
.boostlook .doc h1:has(.anchor),
.boostlook .doc h2:has(.anchor),
.boostlook .doc h3:has(.anchor),
.boostlook .doc h4:has(.anchor),
.boostlook .doc h5:has(.anchor),
.boostlook .doc h6:has(.anchor),
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) {
  display: inline-block;
  /* Anchor width and spacing compensation */
  padding-right: 3rem;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href] {
  text-decoration: none;
  color: inherit;
}

/* Heading Anchors */
.boostlook .doc h1 .anchor,
.boostlook .doc h2 .anchor,
.boostlook .doc h3 .anchor,
.boostlook .doc h4 .anchor,
.boostlook .doc h5 .anchor,
.boostlook .doc h6 .anchor,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id],
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: revert;
  width: 2rem;
  height: 2rem;
  border: 1px;
  visibility: hidden;
  opacity: 0;
  text-decoration: none;
  border-radius: var(--spacing-size-lg, 1.5rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  background: var(--surface-background-main-base-primary, #fff);
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[id] {
  visibility: visible;
}
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:before {
  content: "";
}

.boostlook .doc h1 .anchor::before,
.boostlook .doc h2 .anchor::before,
.boostlook .doc h3 .anchor::before,
.boostlook .doc h4 .anchor::before,
.boostlook .doc h5 .anchor::before,
.boostlook .doc h6 .anchor::before,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
  content: var(--icon-anchor);
  display: block;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  line-height: 0;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.doc h1:hover .anchor,
.doc h2:hover .anchor,
.doc h3:hover .anchor,
.doc h4:hover .anchor,
.doc h5:hover .anchor,
.doc h6:hover .anchor,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:before {
  opacity: 1;
  visibility: visible;
}

.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]):hover a[href]:after {
  opacity: 0.6;
  visibility: visible;
}

.boostlook .doc h1 .anchor:hover,
.boostlook .doc h2 .anchor:hover,
.boostlook .doc h3 .anchor:hover,
.boostlook .doc h4 .anchor:hover,
.boostlook .doc h5 .anchor:hover,
.boostlook .doc h6 .anchor:hover,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]:hover) a[href]:before {
  border-color: var(--border-border-blue, #92cbe9);
}

.boostlook .doc h1 .anchor:active,
.boostlook .doc h2 .anchor:active,
.boostlook .doc h3 .anchor:active,
.boostlook .doc h4 .anchor:active,
.boostlook .doc h5 .anchor:active,
.boostlook .doc h6 .anchor:active,
.boostlook :where(h1, h2, h3, h4, h5, h6):has(> a[id]):has(> a[href]) a[href]:active:before {
  border-color: var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

.boostlook .doc h1 .anchor:hover::before,
.boostlook .doc h2 .anchor:hover::before,
.boostlook .doc h3 .anchor:hover::before,
.boostlook .doc h4 .anchor:hover::before,
.boostlook .doc h5 .anchor:hover::before,
.boostlook .doc h6 .anchor:hover::before {
  opacity: 1;
}

/* Paragraph Styling */
.boostlook p {
  padding-top: initial !important;
  padding-bottom: initial !important;
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-sm, 1rem);
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
}

/* Components margins */
.boostlook .paragraph + .paragraph,
.boostlook:not(:has(.doc)) .section > p + p,
.boostlook:not(:has(.doc)) .chapter > p + p,
.boostlook div.blockquote blockquote p + p,
.boostlook#libraryReadMe > p:not(:first-child) + p,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > p + p,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > p + p,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > p + p {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook .paragraph + .tabs,
.boostlook #content .paragraph + .admonitionblock,
.boostlook #content .tabs + .paragraph,
.boostlook #content .colist + .paragraph,
.boostlook #content .admonitionblock + .tabs,
.boostlook #content .admonitionblock + .admonitionblock,
.boostlook #content .olist + .admonitionblock,
.boostlook #content .olist + .paragraph,
.boostlook:not(:has(.doc)) div.orderedlist + p,
.boostlook:not(:has(.doc)) p + div.orderedlist,
.boostlook:not(:has(.doc)) .itemizedlist + p,
.boostlook:not(:has(.doc)) div.itemizedlist:has(+ a[id^="bind"]) + a + *,
.boostlook:not(:has(.doc)) div.table:has(+ .table-break) + .table-break + *,
.boostlook #content .paragraph + .olist,
.boostlook #content .ulist + .admonitionblock,
.boostlook #content .ulist + .paragraph,
.boostlook #content .colist + .admonitionblock,
.boostlook #content .admonitionblock + .paragraph,
.boostlook #content .paragraph + table.tableblock,
.boostlook.boostlook:not(:has(.doc)) p + table.table,
.boostlook.boostlook:not(:has(.doc)) p + .informaltable,
.boostlook #content table.tableblock + .paragraph,
.boostlook #content table.tableblock + .admonitionblock,
.boostlook:not(:has(.doc)) .informaltable + p,
.boostlook #content .imageblock + .paragraph,
.boostlook:not(:has(.doc)) .inlinemediaobject + p,
.boostlook:not(:has(.doc)) p:has(> .inlinemediaobject:only-child) + p,
.boostlook#libraryReadMe > p + table,
.boostlook#libraryReadMe > table + p,
.boostlook#libraryReadMe > ul + p,
.boostlook#libraryReadMe .literalblock + .paragraph,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) + p,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) + p,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) + p {
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook #content .dlist + .paragraph,
.boostlook #content .dlist + .listingblock,
.boostlook:not(:has(.doc)) div.blockquote + p,
.boostlook:not(:has(.doc)) .variablelist + p {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook h2 + .tabs,
.boostlook .doc h2 + .tabs,
.boostlook h3 + .tabs,
.boostlook .doc h3 + .tabs,
.boostlook h4 + .tabs,
.boostlook .doc h4 + .tabs,
.boostlook h5 + .tabs,
.boostlook .doc h5 + .tabs,
.boostlook h5 + .tabs,
.boostlook .doc h6 + .tabs,
.boostlook #content .sectionbody .olist:first-child,
.boostlook:not(:has(.doc)) .section div.orderedlist:first-child {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook .olist .imageblock .content,
.boostlook .ulist .imageblock .content {
  margin-bottom: var(--padding-padding-xs, 0.75rem);
}

/* Special paragraph cases */
.boostlook table p,
.boostlook ul p {
  margin: 0;
}

/* Link Styling */
.boostlook a,
.boostlook .doc a {
  color: var(--text-main-text-link-blue, #026a9f);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Link Hover States */
.boostlook a:hover,
.boostlook .doc a:hover {
  color: var(--text-states-text-warning, #FF9442);
  cursor: pointer;
}

/* Link States */
.boostlook p a:visited:not(:hover),
.boostlook table a:visited:not(:hover) {
  color: var(--text-main-text-body-tetriary, #62676b);
}

/* Emphasis within code */
.boostlook em,
.boostlook code em {
  font-family: "Noto Sans Display";
  font-size: inherit;
}

/* Text Emphasis */
.boostlook b,
.boostlook strong {
  font-variation-settings: "wght" 600;
}

/* Code Block Styling */
.boostlook .doc .listingblock,
.boostlook .listingblock {
  position: relative;
}

.boostlook .doc .listingblock code,
.boostlook .listingblock code {
  display: initial;
}

.boostlook .hljs {
  background: transparent;
}

.boostlook code {
  font-family: var(--font-family-code, "Noto Sans Mono"), monospace;
}

.boostlook table thead code {
  background: inherit;
}

.boostlook pre code,
.boostlook pre code.hljs,
.boostlook .doc .content pre code,
.boostlook .doc pre.highlight code {
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  color: var(--text-main-text-primary, #18191b);
  padding: revert;
  border: none;
}

.boostlook pre:not(:has(> code)),
.boostlook pre:not(:has(> code)):has(p, span) {
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook pre,
.boostlook pre.rouge,
.boostlook .doc .content pre,
.boostlook .doc pre.highlight,
.boostlook .doc .listingblock pre:not(.highlight),
.boostlook .doc .literalblock pre {
  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
  background: var(--atom-one-light-bg, #fafafa);
  border-radius: var(--spacing-size-2xs);
  border: unset;
}

/* Dark theme code block background */
html.dark .boostlook pre,
html.dark .boostlook pre.rouge,
html.dark .boostlook .doc .content pre,
html.dark .boostlook .doc pre.highlight,
html.dark .boostlook .doc .listingblock pre:not(.highlight),
html.dark .boostlook .doc .literalblock pre {
  background: var(--atom-one-dark-bg, #282c34);
}

.boostlook .doc pre {
  padding: initial;
}

.boostlook .content:has(> pre),
.boostlook .content:has(> pre.highlight) {
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid var(--border-border-secondary, #d5d7d9);
  background: var(--surface-background-main-surface-secondary, #e4e7ea);
}

.boostlook pre.programlisting {
  border: 1px solid var(--border-border-secondary, #d5d7d9);
}

/* Code Block Regular Title */
.boostlook .doc .listingblock .title,
.boostlook .listingblock .title {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: var(--typography-line-height-md, 1.25rem);
  letter-spacing: unset;
  padding-bottom: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .doc .listingblock .title a,
.boostlook .listingblock .title a {
  font: inherit;
  text-decoration: none;
}

/* Code Block Title With File Name.
 * Applies only if codeblock has child with class .toolbox
 * and it`s title doesn`t includes any other elems as children
*/
.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)),
.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre)) {
  position: absolute;
  top: 1px;
  height: 2rem;
  max-width: calc(100% - 5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  padding-left: var(--spacing-size-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-size-2xs, 0.5rem);
  color: var(--text-main-text-body-tetriary, #62676b);
  font-family: "Noto Sans Display";
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  z-index: 1;
}

.boostlook .doc .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before,
.boostlook .listingblock:has(.source-toolbox) .title:not(:has(a, span, p, code, pre))::before {
  content: var(--icon-file);
  line-height: 0;
}

/* Code Block Margins */
.boostlook .listingblock:has(> .content > pre),
.boostlook .listingblock:has(> .content > pre.highlight),
.boostlook:not(:has(.doc)) pre.programlisting,
.boostlook#libraryReadMe > pre,
.boostlook#libraryReadMe .literalblock:has(pre),
.boostlook#libraryReadMe div.highlight:has(> pre) {
  margin: 0;
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

/* Apply left margin only if code block not in definition block or in table */
.boostlook .listingblock:has(> .content > pre):not(:is(dd pre, td pre)),
.boostlook .listingblock:has(> .content > pre.highlight):not(:is(dd pre, td pre)),
.boostlook:not(:has(.doc)) pre.programlisting:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe > pre:not(:is(dd pre, td pre)),
.boostlook#libraryReadMe .literalblock:has(pre):not(:is(dd pre, td pre)),
.boostlook#libraryReadMe div.highlight:has(> pre):not(:is(dd pre, td pre)) {
  margin-left: var(--spacing-size-xl);
}

.boostlook .listingblock:has(> .content > pre):not(:last-child),
.boostlook .listingblock:has(> .content > pre.highlight):not(:last-child),
.boostlook:not(:has(.doc)) pre.programlisting:not(:last-child),
.boostlook#libraryReadMe > pre:not(:last-child) {
  margin-bottom: var(--padding-padding-xs, 0.75rem);
}

.boostlook .content:has(> pre):has(> .source-toolbox) {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
}

.boostlook .content:has(> pre):has(> .source-toolbox) pre {
  border-top: 1px solid var(--border-border-secondary, #d5d7d9);
  border-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook .content:has(> pre):has(> .source-toolbox) .source-toolbox {
  position: static;
  order: 0;
  display: flex;
  visibility: visible;
  top: unset;
  right: unset;
  color: var(--text-main-text-body-tetriary, #62676b);
  font-family: inherit;
  z-index: 1;
  padding: var(--article-article-compressing-from-12-8--, 0.5rem) var(--spacing-size-sm, 1rem);
  min-height: 2rem;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang {
  color: var(--text-main-text-body-quaternary, #949a9e);
  text-align: right;
  font-family: "Noto Sans Display";
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-transform: uppercase;
  margin-left: auto;
}
.boostlook .content:has(> pre):has(> .source-toolbox) .source-lang::after {
  content: none;
}

/* Code Block Copy to Clipboard Icon */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button {
  position: absolute;
  top: 2.25rem;
  right: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: inherit;
  outline: none;
  font-size: inherit;
  line-height: inherit;
  width: 2rem;
  height: 2rem;
  padding: var(--spacing-size-3xs, 0.25rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button:hover {
  border: 1px solid var(--border-border-blue, #92cbe9);
}

.boostlook .content:has(> pre):has(> .source-toolbox):hover .copy-button {
  opacity: 1;
  visibility: visible;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button img {
  display: none;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-button::before {
  content: var(--icon-clipboard);
  width: var(--icons-24, 1.5rem);
  height: var(--icons-24, 1.5rem);
  aspect-ratio: 1/1;
}

/* Code Block Copied Toast */
.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast {
  flex: none;
  position: relative;
  display: inline-flex;
  justify-content: center;
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-xs, 0.75rem);
  flex-direction: column;
  align-items: center;
  margin-top: 1em;
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid var(--border-border-secondary, #d5d7d9);
  color: var(--text-main-text-primary, #18191b);
  cursor: auto;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.boostlook .content:has(> pre):has(> .source-toolbox) .copy-toast::after {
  content: url("data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M6%2011.95L11.6569%206.2931L6%200.636243L0.343146%206.2931L6%2011.95Z%22%20fill%3D%22%23F5F6F8%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.343146%206.2931L6%200.636243L11.6569%206.2931L10.9497%207.0002L6%202.05046L1.05025%207.0002L0.343146%206.2931Z%22%20fill%3D%22%23E4E7EA%22%2F%3E%3C%2Fsvg%3E");
  position: absolute;
  top: -62%;
  width: 1em;
  height: 1em;
  border: unset;
  border-left-color: unset;
  transform: unset;
  transform-origin: unset;
  color: var(--text-main-text-primary, #18191b);
  text-align: center;
  font-size: var(--typography-font-size-sm, 1rem);
  font-weight: 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
}

/* Code Styling */
.boostlook p code:not(:has(> code)),
.boostlook li code:not(:has(> code)),
.boostlook .doc p code:not(:has(> code)),
.boostlook .doc .colist > table code:not(:has(> code)) {
  display: inline;
  color: var(--text-code-neutral, #0d0e0f);
  font-size: 0.96em;
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-md);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  font-stretch: 90%;
}

.boostlook p:not(:is(table p)) code:not(:has(> code)),
.boostlook li code:not(:has(> code)),
.boostlook .doc p:not(:is(table p)) code:not(:has(> code)),
.boostlook .doc .colist > table code:not(:has(> code)) {
  border-radius: unset;
  padding: unset;
  /* border: 1px solid var(--border-border-secondary, #d5d7d9); */
  background: transparent !important;
}

/* Code Links */
.boostlook p:not(:is(table p)) a code,
.boostlook li:not(:is(table li)) a code,
.boostlook .doc p:not(:is(table p)) a code,
.boostlook .doc table a code,
.boostlook .doc .colist > table a code,
.boostlook code:has(> a:first-child:last-child),
.boostlook code:has(> a:only-child),
.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child),
.boostlook p:not(:is(table p)) code:has(> a:only-child),
.boostlook li:not(:is(table li)) code:has(> a:first-child:last-child),
.boostlook li:not(:is(table li)) code:has(> a:only-child),
.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child),
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child),
.boostlook .doc .colist > table code:has(> a:first-child:last-child),
.boostlook .doc .colist > table code:has(> a:only-child) {
  /* transition: all 0.2s ease; */
  border-radius: unset;
  border: none;
  background: transparent !important;
  color: inherit;
}

/* Applies to links in code in case where only one link tag inside code */
/* .boostlook code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook p code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook li code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook li code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook .doc p code:not(.tableblock code, .table code):has(> a:first-child:last-child) a,
.boostlook .doc p code:not(.tableblock code, .table code):has(> a:only-child) a,
.boostlook .doc .colist > table code:has(> a:first-child:last-child) a,
.boostlook .doc .colist > table code:has(> a:only-child) a {
  text-decoration: none;
  font: inherit;
  color: inherit;
} */

/* .boostlook .doc table.tableblock code a,
.boostlook:not(:has(.doc)) table.table code a { */
/* text-decoration-color: transparent; */
/* color: var(--text-code-blue, #329cd2); */
/* line-height: var(--typography-line-height-lg, 1.5rem); */
/* } */

/* Code Link Hover States */
/* .boostlook p:not(:is(table p)) a:hover code,
.boostlook li a:hover code,
.boostlook .doc p:not(:is(table p)) a:hover code,
.boostlook .doc table a:hover code,
.boostlook .doc .colist > table a:hover code,
.boostlook p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
.boostlook p:not(:is(table p)) code:has(> a:only-child):hover,
.boostlook li code:has(> a:first-child:last-child):hover,
.boostlook li code:has(> a:only-child):hover,
.boostlook .doc p:not(:is(table p)) code:has(> a:first-child:last-child):hover,
.boostlook .doc p:not(:is(table p)) code:has(> a:only-child):hover,
.boostlook .doc .colist > table code:has(> a:first-child:last-child):hover,
.boostlook .doc .colist > table code:has(> a:only-child):hover {
  border-color: var(--border-border-blue-hover, #329cd2);
  background: var(--surface-background-main-surface-blue-tetriary, #c2e2f4) !important;
} */

.boostlook a:hover code {
  color: inherit;
}

.boostlook .doc table.tableblock code:hover a,
.boostlook:not(:has(.doc)) table.table code:hover a,
.boostlook .doc table.tableblock code a:focus-visible,
.boostlook:not(:has(.doc)) table.table code a:focus-visible {
  text-decoration-color: var(--border-border-blue, #92cbe9);
}

/* Syntax Highlighting */
.boostlook .hljs-keyword,
.boostlook .hljs-selector-tag,
.boostlook .hljs-subst,
.boostlook pre span.k,
.boostlook pre span.kc,
.boostlook pre span.kd,
.boostlook pre span.kn,
.boostlook pre span.kp,
.boostlook pre span.kr,
.boostlook pre span.kt,
.boostlook pre span.keyword,
.boostlook pre span.property {
  color: var(--text-code-purple, #9f26e5);
}

.boostlook pre span.n,
.boostlook pre span.na,
.boostlook pre span.nb,
.boostlook pre span.bp,
.boostlook pre span.nc,
.boostlook pre span.no,
.boostlook pre span.nd,
.boostlook pre span.ni,
.boostlook pre span.ne,
.boostlook pre span.nf,
.boostlook pre span.py,
.boostlook pre span.nl,
.boostlook pre span.nn,
.boostlook pre span.nx,
.boostlook pre span.nt,
.boostlook pre span.nv,
.boostlook pre span.vc,
.boostlook pre span.vg,
.boostlook pre span.vi,
.boostlook pre span.identifier {
  color: var(--text-main-text-body-primary, #2a2c30);
}

.boostlook pre span.c,
.boostlook pre span.ch,
.boostlook pre span.cm,
.boostlook pre span.cp,
.boostlook pre span.cpf,
.boostlook pre span.c1,
.boostlook pre span.cs,
.boostlook pre span.sd,
.boostlook pre span.sh,
.boostlook pre span.comment,
.boostlook .hljs-comment,
.boostlook .hljs-quote,
.boostlook .hljs-addition,
.boostlook .hljs-built_in,
.boostlook .hljs-bullet,
.boostlook .hljs-code {
  color: var(--atom-one-light-comment, #a0a1a7);
  font-style: italic;
}

/* Dark theme comment color */
html.dark .boostlook pre span.c,
html.dark .boostlook pre span.ch,
html.dark .boostlook pre span.cm,
html.dark .boostlook pre span.cp,
html.dark .boostlook pre span.cpf,
html.dark .boostlook pre span.c1,
html.dark .boostlook pre span.cs,
html.dark .boostlook pre span.sd,
html.dark .boostlook pre span.sh,
html.dark .boostlook pre span.comment,
html.dark .boostlook .hljs-comment,
html.dark .boostlook .hljs-quote,
html.dark .boostlook .hljs-addition,
html.dark .boostlook .hljs-built_in,
html.dark .boostlook .hljs-bullet,
html.dark .boostlook .hljs-code {
  color: var(--atom-one-dark-comment, #5c6370);
}

.boostlook pre span.s,
.boostlook pre span.sa,
.boostlook pre span.sb,
.boostlook pre span.dl,
.boostlook pre span.s2,
.boostlook pre span.se,
.boostlook pre span.si,
.boostlook pre span.sx,
.boostlook pre span.sr,
.boostlook pre span.s1,
.boostlook pre span.ss,
.boostlook pre span.string,
.boostlook .hljs-doctag,
.boostlook .hljs-string,
.boostlook .hljs-deletion,
.boostlook .hljs-number,
.boostlook .hljs-quote,
.boostlook .hljs-selector-class,
.boostlook .hljs-selector-id,
.boostlook .hljs-template-tag,
.boostlook .hljs-type {
  color: var(--text-code-red, #f9677f);
}

.boostlook .hljs-section,
.boostlook .hljs-selector-id,
.boostlook .hljs-title {
  color: var(--text-code-blue, #329cd2);
}

.boostlook .hljs-attribute,
.boostlook .hljs-name,
.boostlook .hljs-tag {
  color: var(--text-main-text-primary, #18191b);
}

/* Syntax Defaults */
.boostlook .hljs-attribute,
.boostlook .hljs-doctag,
.boostlook .hljs-keyword,
.boostlook .hljs-meta .hljs-keyword,
.boostlook .hljs-name,
.boostlook .hljs-selector-tag,
.boostlook .hljs-section,
.boostlook .hljs-title {
  font-weight: inherit;
}

.boostlook .hljs-meta {
  color: inherit;
}

/* Table Headings */
.boostlook h6:has(+ table) {
  margin-left: 1em;
}

/* Quote Blocks */
.boostlook .quoteblock,
.boostlook .doc .quoteblock,
.boostlook .verseblock,
.boostlook .doc .verseblock,
.boostlook div.blockquote {
  padding: var(--padding-padding-md, 1.125rem) var(--padding-padding-lg, 1.5rem);
  border-radius: var(--spacing-size-size-0, 0rem) var(--spacing-size-2xs, 0.5rem) var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
  border-left: 2px solid var(--border-border-active, #18191b);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-sm, 1rem);
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem);
}

.boostlook .quoteblock:not(:first-child),
.boostlook .doc .quoteblock:not(:first-child),
.boostlook .verseblock:not(:first-child),
.boostlook .doc .verseblock:not(:first-child),
.boostlook div.blockquote:not(:first-child) {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .quoteblock blockquote,
.boostlook .doc .quoteblock blockquote,
.boostlook .verseblock blockquote,
.boostlook .doc .verseblock blockquote,
.boostlook div.blockquote blockquote {
  margin: 0;
}

.boostlook .quoteblock blockquote .paragraph,
.boostlook .doc .quoteblock blockquote .paragraph,
.boostlook .verseblock blockquote .paragraph,
.boostlook .doc .verseblock blockquote .paragraph,
.boostlook div.blockquote blockquote p {
  font: inherit;
}

.boostlook .quoteblock blockquote p,
.boostlook .doc .quoteblock blockquote p,
.boostlook .verseblock blockquote p,
.boostlook .doc .verseblock blockquote p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* Pagination */
.boostlook nav.pagination {
  border-top: revert;
  line-height: initial;
  margin: revert;
  display: flex;
  padding: var(--spacing-size-2xs, 0.5rem) var(--spacing-size-size-0, 0rem);
  align-items: stretch;
  gap: var(--spacing-size-2xs, 0.5rem);
}

.boostlook nav.pagination > span {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  backdrop-filter: blur(8px);
  padding-right: revert;
  padding-left: revert;
  margin-left: revert;
}
.boostlook nav.pagination > span.next {
  text-align: right;
}

.boostlook nav.pagination span::before {
  content: none !important;
}

.boostlook nav.pagination > span a {
  /* Container padding + two paddings of arrow icon container + arrow icon width + gap between arrow and content */
  --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-3xs) * 2) + var(--icons-24) + var(--padding-padding-md));
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--padding-padding-xs, 0.75rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  padding: var(--padding-padding-xs, 0.75rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-sm, 1rem);
  font-weight: 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 150% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.boostlook nav.pagination > span:hover a {
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: inherit;
}

.boostlook nav.pagination > span.prev a {
  padding-left: var(--_arrow-based-padding);
}
.boostlook nav.pagination > span.next a {
  padding-right: var(--_arrow-based-padding);
}

@media screen and (min-width: 990px) {
  .boostlook nav.pagination > span a {
    --_arrow-based-padding: calc(var(--padding-padding-2xs) + (var(--spacing-size-xs) * 2) + var(--icons-24) + var(--padding-padding-md));
  }
}

.boostlook nav.pagination > span a::before {
  width: auto;
  position: static;
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  transform: revert;
}

.boostlook nav.pagination > span.prev a::before {
  content: "Previous";
}
.boostlook nav.pagination > span.next a::before {
  content: "Next";
}

.boostlook nav.pagination > span a::after {
  --_arrow-size: calc((var(--spacing-size-3xs, 0.25rem) * 2) + var(--icons-24));
  position: absolute;
  top: 50%;
  display: flex;
  width: var(--_arrow-size);
  height: var(--_arrow-size);
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--spacing-size-2xs, 0.5rem);
  background: var(--surface-background-main-base-primary, #fff);
  transition: all 0.2s ease;
  transform: translateY(-50%);
}

@media screen and (min-width: 990px) {
  .boostlook nav.pagination > span a::after {
    --_arrow-size: calc((var(--spacing-size-xs, 0.75rem) * 2) + var(--icons-24));
  }
}

.boostlook nav.pagination > span.prev a::after {
  content: var(--icon-arrow-left);
  left: var(--padding-padding-2xs, 0.5rem);
}

.boostlook nav.pagination > span.next a::after {
  content: var(--icon-arrow-right);
  right: var(--padding-padding-2xs, 0.5rem);
}

.boostlook nav.pagination > span:hover a::after {
  border-color: var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

/* Admonitions */
.boostlook #content .admonitionblock,
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) div.blurb,
.boostlook:not(:has(.doc)) p.blurb {
  padding: var(--padding-padding-xs, 0.75rem) var(--padding-padding-md, 1.125rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid transparent;
  margin: revert;
  background: transparent;
}

/* Readme Template Admonitionblock */
.boostlook:not(:has(.doc)) .notices {
  background-image: none !important;
}

.boostlook #content .admonitionblock > table,
.boostlook:not(:has(.doc)) div.note > table,
.boostlook:not(:has(.doc)) div.tip > table,
.boostlook:not(:has(.doc)) div.important > table,
.boostlook:not(:has(.doc)) div.caution > table,
.boostlook:not(:has(.doc)) div.warning > table,
.boostlook:not(:has(.doc)) div.blurb > table,
.boostlook:not(:has(.doc)) p.blurb > table {
  all: revert;
  table-layout: fixed;
  position: relative;
  width: 100%;
}

.boostlook #content .admonitionblock > table tr,
.boostlook:not(:has(.doc)) div.note tbody,
.boostlook:not(:has(.doc)) div.tip tbody,
.boostlook:not(:has(.doc)) div.important tbody,
.boostlook:not(:has(.doc)) div.caution tbody,
.boostlook:not(:has(.doc)) div.warning tbody,
.boostlook:not(:has(.doc)) div.blurb tbody,
.boostlook:not(:has(.doc)) p.blurb tbody,
.boostlook:not(:has(.doc)) .notices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-size-2xs, 0.5rem);
}

.boostlook #content .admonitionblock > table tr td {
  padding: 0;
  border: unset;
}

.boostlook #content .admonitionblock > table tr td.icon,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices .heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-size-2xs, 0.5rem);
  /* Removes legacy icon */
  background: transparent;
}

.boostlook:not(:has(.doc)) .notices .heading {
  margin: 0;
}

.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th > *,
.boostlook:not(:has(.doc)) div.blurb > table tr:first-child th > *,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child th > *,
.boostlook #content .admonitionblock > table tr td.icon > *,
.boostlook:not(:has(.doc)) .notices .heading {
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-sm, 1rem);
  font-weight: 600;
  line-height: var(--typography-line-height-lg, 1.5rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  /* text-transform: uppercase; */
}
.boostlook #content .admonitionblock > table tr td.icon > * {
  padding: 0;
  font-family: var(--font-family-body, "Noto Sans Display");
}

.boostlook #content .admonitionblock > table tr td.icon i.fa::after {
  content: attr(title);
}

.boostlook #content .admonitionblock > table tr td.content,
/* Leagcy Doc */
.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.note > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.tip > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.important > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.caution > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.warning > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) div.blurp > table tr:not(:first-child) td p,
.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td,
.boostlook:not(:has(.doc)) p.blurb > table tr:not(:first-child) td p,
/* Antora Template Correction*/
.boostlook #content .admonitionblock > table tr td.content p,
.boostlook:not(:has(.doc)) .notices .message p {
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook:not(:has(.doc)) .notices .message {
  margin: 0;
}

.boostlook #content .admonitionblock > table code,
.boostlook:not(:has(.doc)) div.note > table code,
.boostlook:not(:has(.doc)) div.tip > table code,
.boostlook:not(:has(.doc)) div.important > table code,
.boostlook:not(:has(.doc)) div.caution > table code,
.boostlook:not(:has(.doc)) div.warning > table code,
.boostlook:not(:has(.doc)) div.blurb > table code,
.boostlook:not(:has(.doc)) p.blurb > table code {
  margin: revert;
  padding: 0;
}

/* Note */
.boostlook #content .admonitionblock.note,
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) .notices.note {
  border-color: var(--border-border-blue-primary, #c2e2f4);
  background-color: var(--surface-background-main-surface-blue-primary, #ebf4f9);
}
/* .boostlook #content .admonitionblock.note > table tr td.icon,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.note .heading {
  background: var(--surface-background-states-surface-additional-tetriary, #92cbe9);
} */
.boostlook #content .admonitionblock.note > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.note > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.note .heading {
  color: var(--text-main-text-primary, #18191b);
}

/* Tip */
.boostlook #content .admonitionblock.tip,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) .notices.tip {
  border-color: var(--border-border-positive, #bdeed6);
  background-color: var(--surface-background-states-surface-positive-primary, #f0fef7);
}
/* .boostlook #content .admonitionblock.tip > table tr td.icon,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.tip .heading {
  background: var(--border-border-positive, #bdeed6);
} */
.boostlook #content .admonitionblock.tip > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.tip > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.tip .heading {
  color: var(--text-main-text-primary, #18191b);
}

/* Important */
.boostlook #content .admonitionblock.important,
.boostlook #content .admonitionblock.caution,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) .notices.important {
  border-color: var(--border-border-brand-orange, #ffd897);
  background-color: var(--surface-background-states-surface-warning-primary, #fff8f3);
}
/* .boostlook #content .admonitionblock.important > table tr td.icon,
.boostlook #content .admonitionblock.caution > table tr td.icon,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.important {
  background: var(--surface-background-states-surface-warning-tetriary, #ffd4b3);
} */
.boostlook #content .admonitionblock.important > table tr td.icon > *,
.boostlook #content .admonitionblock.caution > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.important > table tr:first-child th,
.boostlook:not(:has(.doc)) div.caution > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.important {
  color: var(--text-main-text-primary, #18191b);
}

/* Warning */
.boostlook #content .admonitionblock.warning,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) .notices.warning {
  border-color: var(--border-border-negative, #ffcad2);
  background-color: var(--surface-background-states-surface-negative-primary, #fdf1f3);
}
/* .boostlook #content .admonitionblock.warning > table tr td.icon,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.warning .heading {
  background: var(--surface-background-states-surface-negative-tetriary, #ffcad2);
} */
.boostlook #content .admonitionblock.warning > table tr td.icon > *,
.boostlook:not(:has(.doc)) div.warning > table tr:first-child th,
.boostlook:not(:has(.doc)) .notices.warning .heading {
  color: var(--text-main-text-primary, #18191b);
}

/* Dlist  */
.boostlook #content .dlist:not(:first-child),
.boostlook .dlist dl dt:not(:first-child),
.boostlook:not(:has(.doc)) .variablelist:not(:first-child),
.boostlook:not(:has(.doc)) .variablelist dl dt:not(:first-child) {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .dlist dl,
.boostlook:not(:has(.doc)) .variablelist dl {
  display: flex;
  flex-direction: column;
}

.boostlook .dlist dl dt,
.boostlook:not(:has(.doc)) .variablelist dl dt {
  display: block;
  width: fit-content;
  padding: var(--leftbar-paddings-leftbar-padding-0, 0rem) var(--padding-padding-2xs, 0.5rem);
  border-radius: var(--spacing-size-3xs, 0.25rem);
  border: 1px solid var(--border-border-secondary, #d5d7d9);
  border-bottom-left-radius: unset;
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: var(--text-code-neutral, #0d0e0f);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  margin-bottom: 0;
}

.boostlook .dlist dl dt code,
.boostlook:not(:has(.doc)) .variablelist dl dt code {
  border: none;
  padding: 0;
  background: transparent !important;
}

.boostlook .dlist dl dt .term,
.boostlook:not(:has(.doc)) .variablelist dl dt .term {
  font: inherit;
  font-weight: inherit;
}

.boostlook .dlist dl dd,
.boostlook:not(:has(.doc)) .variablelist dl dd {
  margin: unset;
  margin-top: -1px;
  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-sm, 1rem);
  border-radius: var(--padding-padding-2xs, 0.5rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  border-top-left-radius: unset;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  line-height: var(--typography-line-height-lg, 1.5rem);
}

.boostlook .dlist dl dd p,
.boostlook:not(:has(.doc)) .variablelist dl dd p {
  font: inherit;
  margin: 0;
}

/* Edit Page Link */
.boostlook .edit-this-page {
  color: var(--text-main-text-body-quaternary, #949a9e);
  text-align: right;
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
  padding: 0 var(--padding-padding-2xs, 0.5rem);
}

.boostlook .edit-this-page a {
  all: inherit;
}

/* Layout Structure */
.boostlook #header,
.boostlook #content,
.boostlook #footer {
  padding-left: var(--main-margin);
  padding-right: var(--main-margin);
}

.boostlook #header {
  padding-top: 1.25rem;
}

.boostlook #footer {
  padding-top: var(--padding-padding-sm);
  padding-bottom: var(--padding-padding-sm);
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-xs);
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Unordered Lists */
/* Reset Legacy and Common */
.boostlook .doc .dlist .dlist,
.boostlook .doc .dlist .olist,
.boostlook .doc .dlist .ulist,
.boostlook .doc .olist .dlist,
.boostlook .doc .olist .olist,
.boostlook .doc .olist .ulist,
.boostlook .doc .olist li + li,
.boostlook .doc .ulist .dlist,
.boostlook .doc .ulist .olist,
.boostlook .doc .ulist .ulist,
.boostlook .doc .ulist:not(.tablist) li + li,
.boostlook:not(:has(.doc)) div.orderedlist li + li {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

.boostlook .doc .dlist .dlist,
.boostlook .doc .dlist .olist,
.boostlook .doc .dlist .ulist,
.boostlook .doc .olist .dlist,
.boostlook .doc .olist .olist,
.boostlook .doc .olist .ulist,
.boostlook .doc .ulist .dlist,
.boostlook .doc .ulist .olist,
.boostlook .doc .ulist .ulist,
.boostlook:not(:has(.doc)) div.orderedlist div.orderedlist {
  margin-bottom: var(--padding-padding-2xs, 0.5rem);
}

/* Default List */
.boostlook ul.itemizedlist,
.boostlook .ulist:not(:first-child):not(.tablist),
.boostlook .ulist:not(:first-child).disc,
.boostlook#libraryReadMe ul:not(:first-child),
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook ul.itemizedlist,
.boostlook .ulist:not(.tablist) > ul,
.boostlook .ulist.disc > ul,
.boostlook#libraryReadMe ul,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) {
  list-style: none;
  padding: 0;
}

.boostlook ul.itemizedlist {
  list-style: none !important;
}

.boostlook ul.itemizedlist > li,
.boostlook .ulist:not(.tablist) > ul > li,
.boostlook .ulist.disc > ul > li,
.boostlook#libraryReadMe ul > li,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class])> li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class])> li {
  position: relative;
  padding-left: 2rem;
}

.boostlook ul.itemizedlist > li,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ul:not([class]) li,
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content ol:not([class]) li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content ul:not([class]) li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content ol:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ul:not([class]) li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content ol:not([class]) li {
  font: inherit;
}

.boostlook ul.itemizedlist > li + li,
.boostlook .ulist:not(.tablist) > ul > li + li,
.boostlook .ulist.disc > ul > li + li,
.boostlook#libraryReadMe ul > li + li,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li + li,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li + li,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li + li {
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

.boostlook ul.itemizedlist > li::before,
.boostlook .ulist:not(.tablist) > ul > li::before,
.boostlook .ulist.disc > ul > li::before,
.boostlook#libraryReadMe ul > li::before,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > ul:not([class]) > li::before,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > ul:not([class]) > li::before,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content > ul:not([class]) > li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main-text-primary, #18191b);
}

/* Ordered Lists */
.boostlook .olist.arabic > ol,
.boostlook .olist.loweralpha > ol,
.boostlook:not(:has(.doc)) .orderedlist > ol {
  list-style: none;
  counter-reset: list-counter;
  padding-left: 0;
}

/* Arabic Ordered List */
.boostlook .olist.arabic > ol > li,
.boostlook:not(:has(.doc)) .orderedlist > ol > li {
  position: relative;
  padding-left: 3rem;
  counter-increment: list-counter;
}

.boostlook .olist.arabic > ol > li::before,
.boostlook:not(:has(.doc)) .orderedlist > ol > li::before {
  content: counter(list-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-weight: 400;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
}

.boostlook .olist.arabic > ol > li::after,
.boostlook:not(:has(.doc)) .orderedlist > ol > li::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 0px;
  width: 30px;
  height: 24px;
  border: 1px solid var(--border-border-tetriary);
  /* Mask to make square brackets for marker to make it look like [ 01 ] */
  clip-path: polygon(0 0, 3px 0, 3px 3px, 27px 3px, 27px 0, 30px 0, 30px 24px, 27px 24px, 27px 21px, 3px 21px, 3px 24px, 0 24px);
}

/* LowerAlfa Ordered List */
.boostlook .olist.loweralpha > ol > li {
  position: relative;
  padding-left: 2rem;
  counter-increment: list-counter;
}

.boostlook .olist.loweralpha > ol > li::before {
  content: counter(list-counter, lower-alpha) ". ";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 500;
  line-height: var(--Typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Conum */
.boostlook .doc .conum[data-value] {
  position: relative;
  border: none;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans Display";
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  text-align: center;
  width: 24px;
  height: 24px;
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-indent: unset;
  color: var(--text-main-text-primary, #18191b);
  text-align: center;
  background: var(--surface-background-main-surface-secondary, #e4e7ea);
}

.boostlook .doc .conum[data-value]::after {
  content: attr(data-value);
  font: inherit;
}
.boostlook .doc .conum[data-value] + b {
  display: none;
}

/* Collist */
.boostlook .colist.arabic {
  margin: revert;
}
.boostlook .colist.arabic > table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-main-text-body-primary);
}

.boostlook .colist.arabic > table > tbody > tr td,
.boostlook .colist.arabic > table > tr td {
  /* Reset Legacy */
  padding: revert;
  padding-top: var(--padding-padding-3xs, 0.25rem);
  padding-bottom: 0;
  font-size: var(--typography-font-size-sm, 1rem);
}

.boostlook .colist.arabic > table > tbody > tr > :first-child,
.boostlook .colist.arabic > table > tr > :first-child {
  padding-left: 0;
  padding-right: var(--padding-padding-sm, 1rem);
  vertical-align: top;
  /* to make first column fit its content  */
  width: 1%;
  white-space: nowrap;
}

/* Tables */
/* Reset Antora Table Styles */
.boostlook #content table.tableblock tr,
.boostlook #content table.tableblock td,
.boostlook #content table.tableblock th,
.boostlook #content table.tableblock thead,
.boostlook #content table.tableblock tbody,
.boostlook #content table.tableblock tfoot,
.boostlook #content table.tableblock caption,
.boostlook #content table.tableblock colgroup,
.boostlook #content table.tableblock col,
.boostlook #content table.tableblock,
.boostlook:not(:has(.doc)) table.table tr,
.boostlook:not(:has(.doc)) table.table td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table thead,
.boostlook:not(:has(.doc)) table.table tbody,
.boostlook:not(:has(.doc)) table.table tfoot,
.boostlook:not(:has(.doc)) table.table caption,
.boostlook:not(:has(.doc)) table.table colgroup,
.boostlook:not(:has(.doc)) table.table col,
.boostlook:not(:has(.doc)) table.table,
.boostlook#libraryReadMe > table,
.boostlook#libraryReadMe > table tr,
.boostlook#libraryReadMe > table td,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table thead,
.boostlook#libraryReadMe > table tbody,
.boostlook#libraryReadMe > table tfoot,
.boostlook#libraryReadMe > table caption,
.boostlook#libraryReadMe > table colgroup,
.boostlook#libraryReadMe > table col {
  all: unset;
  display: revert;
}

.boostlook #content table.tableblock:not(:first-child),
.boostlook:not(:has(.doc)) .table:not(:first-child),
.boostlook#libraryReadMe > table:not(:first-child) {
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook #content table.tableblock.stretch,
.boostlook:not(:has(.doc)) table.table,
.boostlook#libraryReadMe > table.stretch {
  min-width: 100%;
}

.boostlook #content table.tableblock caption,
.boostlook:not(:has(.doc)) div.table .title {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 600;
  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
  padding: 0;
  padding-bottom: var(--padding-padding-2xs, 0.5rem);
}

.boostlook #content table.tableblock caption > *,
.boostlook:not(:has(.doc)) div.table .title > * {
  font: inherit;
  font-variation-settings: "wght" 500;
  text-decoration: none;
}

.boostlook:not(:has(.doc)) div.table .title {
  padding-bottom: var(--padding-padding-2xs, 0.5rem) !important;
}

.boostlook #content table.tableblock th,
.boostlook #content table.tableblock td,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table td,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table td {
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
  text-align: left;
  border-top: 1px solid var(--border-border-primary, #e4e7ea);
  border-left: 1px solid var(--border-border-primary, #e4e7ea);
}

.boostlook #content table.tableblock th:last-child,
.boostlook #content table.tableblock td:last-child,
.boostlook:not(:has(.doc)) table.table th:last-child,
.boostlook:not(:has(.doc)) table.table td:last-child,
.boostlook#libraryReadMe > table th:last-child,
.boostlook#libraryReadMe > table td:last-child {
  border-right: 1px solid var(--border-border-primary, #e4e7ea);
}

.boostlook #content table.tableblock tr:last-child td,
.boostlook:not(:has(.doc)) table.table tr:last-child td,
.boostlook#libraryReadMe > table tr:last-child td {
  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
}

.boostlook #content table.tableblock:has(thead) th:first-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:first-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:first-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:first-child,
.boostlook#libraryReadMe > table:has(thead) th:first-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:first-child {
  border-top-left-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook #content table.tableblock:has(thead) th:last-child,
.boostlook #content table.tableblock:not(:has(thead)) tr:first-child td:last-child,
.boostlook:not(:has(.doc)) table.table:has(thead) th:last-child,
.boostlook:not(:has(.doc)) table.table:not(:has(thead)) tr:first-child td:last-child,
.boostlook#libraryReadMe > table:has(thead) th:last-child,
.boostlook#libraryReadMe > table:not(:has(thead)) tr:first-child td:last-child {
  border-top-right-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook #content table.tableblock tr:last-child td:first-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:first-child,
.boostlook#libraryReadMe > table tr:last-child td:first-child {
  border-bottom-left-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook #content table.tableblock tr:last-child td:last-child,
.boostlook:not(:has(.doc)) table.table tr:last-child td:last-child,
.boostlook#libraryReadMe > table tr:last-child td:last-child {
  border-bottom-right-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook #content table.tableblock th,
.boostlook #content table.tableblock th strong,
.boostlook:not(:has(.doc)) table.table th,
.boostlook:not(:has(.doc)) table.table th strong,
.boostlook#libraryReadMe > table th,
.boostlook#libraryReadMe > table th strong {
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
}

.boostlook #content table.tableblock td,
.boostlook:not(:has(.doc)) table.table td,
.boostlook#libraryReadMe > table td {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook#libraryReadMe > table td {
  vertical-align: middle;
}

.boostlook #content table.tableblock td.valign-top,
.boostlook:not(:has(.doc)) table.table td.valign-top,
.boostlook#libraryReadMe > table td.valign-top {
  vertical-align: top;
}

.boostlook #content table.tableblock td.valign-bottom,
.boostlook:not(:has(.doc)) table.table td.valign-bottom,
.boostlook#libraryReadMe > table td.valign-bottom {
  vertical-align: bottom;
}

.boostlook #content table.tableblock td.valign-center,
.boostlook:not(:has(.doc)) table.table td.valign-center,
.boostlook#libraryReadMe > table td.valign-center {
  vertical-align: middle;
}

.boostlook #content table.tableblock td.halign-left,
.boostlook:not(:has(.doc)) table.table td.halign-left,
.boostlook#libraryReadMe > table td.halign-left {
  text-align: left;
}

.boostlook #content table.tableblock td.halign-center,
.boostlook:not(:has(.doc)) table.table td.halign-center,
.boostlook#libraryReadMe > table td.halign-center {
  text-align: center;
}

.boostlook #content table.tableblock th p,
.boostlook #content table.tableblock td p,
.boostlook:not(:has(.doc)) table.table th p,
.boostlook:not(:has(.doc)) table.table td p,
.boostlook#libraryReadMe > table th p,
.boostlook#libraryReadMe > table td p {
  font: inherit;
  color: inherit;
}

.boostlook #content table.tableblock td strong,
.boostlook:not(:has(.doc)) table.table td strong,
.boostlook#libraryReadMe > table td strong {
  font-weight: 600;
  font-variation-settings: "wght" 600;
}

.boostlook #content table.tableblock td code,
.boostlook:not(:has(.doc)) table.table td code,
.boostlook#libraryReadMe > table td code {
  background: transparent !important;
  padding: 0;
  border: none;
}

.boostlook #content table.tableblock .footnotes tr td,
.boostlook:not(:has(.doc)) table.table .footnotes tr td {
  border: none;
  border-radius: 0;
  padding: var(--padding-padding-xs) 0;
}

/* Image Styles */
.boostlook .doc .imageblock,
.boostlook .doc .videoblock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.boostlook:not(#libraryReadMe) .image:has(> img),
.boostlook .content:has(> img),
.boostlook .mediaobject:has(> embed) {
  display: flex;
  padding: var(--padding-padding-md, 1.125rem);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--spacing-size-xs, 0.75rem);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  width: 100%;
  margin-top: var(--padding-padding-xs, 0.75rem);
}

.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img, > object) {
  display: inline-block;
  vertical-align: text-bottom;
  line-height: 0;
}

/*----------------- Global Styles for .boostlook end -----------------*/

/* ----------- Scrollbars Styles Start ------------- */

/**
 *
 * Scrollbar Styling
 *
 * This stylesheet provides comprehensive scrollbar customization for different contexts.
 *
 * Features:
 * 1. Global Scrollbar Styles:
 *    - Applies thin scrollbar width and custom colors to the HTML element.
 *    - Customizes scrollbar appearance for elements within the `.boostlook` class.
 *
 * 2. Media Query Adjustments:
 *    - For screens with a minimum width of 768px, further customizes scrollbar colors for specific elements.
 *    - Changes scrollbar thumb color on hover for better visibility.
 *
 * 3. Webkit Scrollbar Customization:
 *    - Sets the width and height of the scrollbar.
 *    - Customizes the scrollbar track and thumb with specific colors and border-radius.
 *    - Adjusts scrollbar appearance for elements within the `.boostlook` class and its descendants.
 *
 * 4. Hover Effects:
 *    - Changes the scrollbar thumb color on hover for better user interaction.
 *
 */

@supports (scrollbar-width: thin) {
  /* HTML Matches its scroll background to content background */
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--border-border-tetriary, #afb3b6) var(--surface-background-main-base-primary, #fff);
  }

  .boostlook,
  .boostlook *,
  .boostlook pre,
  .boostlook code,
  .boostlook:has(:not(.doc)) div.table .table-contents {
    scrollbar-width: thin;
    scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
  }

  @media screen and (min-width: 768px) {
    .boostlook pre,
    .boostlook code,
    .boostlook:has(:not(.doc)) div.table .table-contents {
      scrollbar-width: thin;
      scrollbar-color: transparent transparent;
    }

    .boostlook pre:hover,
    .boostlook code:hover,
    .boostlook:has(:not(.doc)) div.table .table-contents:hover {
      scrollbar-color: var(--border-border-tetriary, #afb3b6) transparent;
    }
  }
}

html::-webkit-scrollbar,
.boostlook::-webkit-scrollbar,
.boostlook *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

html::-webkit-scrollbar-track {
  background: var(--surface-background-main-base-primary, #fff);
  border-radius: var(--spacing-size-2xs, 0.5rem);
}

.boostlook::-webkit-scrollbar-track,
.boostlook *::-webkit-scrollbar-track,
.boostlook pre::-webkit-scrollbar-track,
.boostlook code::-webkit-scrollbar-track,
.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-track {
  width: 6px;
  background: transparent;
  border-radius: var(--spacing-size-2xs, 0.5rem);
}

html::-webkit-scrollbar-thumb,
.boostlook::-webkit-scrollbar-thumb,
.boostlook *::-webkit-scrollbar-thumb,
.boostlook pre::-webkit-scrollbar-thumb,
.boostlook code::-webkit-scrollbar-thumb,
.boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
  width: 6px;
  background: var(--border-border-tetriary, #afb3b6);
}

@media screen and (min-width: 768px) {
  .boostlook pre::-webkit-scrollbar-thumb,
  .boostlook code::-webkit-scrollbar-thumb,
  .boostlook:has(:not(.doc)) div.table .table-contents::-webkit-scrollbar-thumb {
    background: transparent;
  }

  .boostlook pre:hover::-webkit-scrollbar-thumb,
  .boostlook code:hover::-webkit-scrollbar-thumb,
  .boostlook:has(:not(.doc)) div.table .table-contents:hover:-webkit-scrollbar-thumb {
    background-color: var(--border-border-tetriary, #afb3b6);
  }
}

.boostlook .doc pre,
.boostlook p code,
.boostlook table code,
.boostlook p tt,
.boostlook p kbd,
.boostlook p samp,
.boostlook p pre,
.boostlook:not(:has(.doc)) pre,
.boostlook code,
.boostlook pre code,
.boostlook .doc .content pre code,
.boostlook#libraryReadMe pre code {
  overflow-x: auto;
}

/* ----------- Scrollbars Styles End ------------- */

/* Template-specific Adjustments */

/* Hide root scrollbars for Antora template */
html:has(.article > .boostlook) {
  height: 100vh;
  overflow: hidden;
}

/* Iframe container scrollbar handling */
html:has(#docsiframe) {
  overflow-y: hidden;
}

/* Chrome/Edge scrollbar for iframe container */
html:has(#docsiframe)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Antora template - Scrollable content area */
.boostlook #content:has(> .doc) {
  overflow-y: auto;
}

/* Asciidoc template - Content overflow handling */
.boostlook:has(#content > .sect1) {
  overflow-y: auto;
  height: 100vh;
}

/* Table Container */
.boostlook .content div:has(> table),
.boostlook .doc table.tableblock,
.boostlook #content .sect3:has(.tableblock) {
  overflow-x: auto !important;
}

/* Article Layout */
.article.toc2.toc-left {
  min-height: 100vh;
  /* with padding compensation */
  max-width: calc(var(--main-container) + 2rem);
  margin-left: auto;
  margin-right: auto;
  background: var(--surface-background-main-base-primary, #fff);
  position: relative;
}

/* TOC Common start */
/* Background Colors */
.boostlook #toc.toc2,
.boostlook #header:not(:has(.nav-container)),
.boostlook #content,
.boostlook #footer {
  background: var(--surface-background-main-base-primary, #fff);
}
/* TOC Scrolling */
.boostlook #toc.toc2 {
  overflow-y: auto;
}
/* TOC Positioning */
.boostlook #toc.toc2,
#boost-legacy-docs-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
#antora-template-wrapper:not(:has(article.doc)) #toc.toc2.is-active,
div.source-docs-antora.boostlook:not(:has(article.doc)):not(:has(> .boostlook)) #toc.toc2.is-active {
  position: static;
}

/* TOC Toggle Button */
.boostlook #toggle-toc {
  visibility: hidden;
  height: 0;
  width: 0;
}

/* TOC Navigation Menu */
.boostlook #toc ul,
.boostlook:not(:has(.doc)) div.toc dd {
  margin: 0;
  padding: 0 0 0 var(--leftbar-paddings-leftbar-padding-2xs, 0.5rem);
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-md, 1.25rem);
  list-style: none;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

.boostlook #toc .nav-menu > .nav-list,
.boostlook #toc .nav-menu > .nav-list > .nav-list,
.boostlook #toc > ul.sectlevel1 {
  padding-left: 0;
}

.boostlook .nav-menu .nav-list li,
.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)),
.boostlook #toc > ul.sectlevel1 li:has(> ul) a,
.boostlook:not(:has(.doc)) div.toc dt {
  position: relative;
  padding: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem) var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
}

.boostlook .nav-menu .nav-list li:has(.nav-text),
.boostlook #toc > ul.sectlevel1 li:has(> ul):not(:first-of-type) {
  margin-top: var(--leftbar-paddings-leftbar-padding-4xs, 0.125rem);
}

.boostlook .nav-text,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a {
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Table of Contents Links */
.boostlook #toc a,
.boostlook:not(:has(.doc)) div.toc a {
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
  text-decoration: none;
}

.boostlook #toc a:hover,
.boostlook #toc a:focus,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:hover,
.boostlook #toc > ul.sectlevel1 li:has(> ul) > a:focus,
.boostlook:not(:has(.doc)) div.toc a:hover,
.boostlook:not(:has(.doc)) div.toc a:focus {
  color: var(--text-main-text-link-blue-secondary, #0284c7);
  text-decoration: none;
}

.boostlook #toc .nav-link:visited:not(:hover),
.boostlook #toc .sectlevel1 li:not(:has(> ul)) a:visited:not(:hover),
.boostlook:not(:has(.doc)) div.toc a:visited:not(:hover) {
  color: var(--text-main-text-link-viewed, #62b3dd);
}

.boostlook .nav-list li[data-depth]:not([data-depth="1"]),
.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li,
.boostlook:not(:has(.doc)) div.toc dd dt {
  margin-left: calc(var(--leftbar-paddings-leftbar-padding-2xs) * -1);
  padding-left: calc(var(--padding-padding-sm, 1rem) + var(--leftbar-paddings-leftbar-padding-2xs));
}

.boostlook .nav-list li[data-depth]:not([data-depth="1"])::before,
.boostlook #toc > ul.sectlevel1 ul[class*="sectlevel"] > li::before,
.boostlook:not(:has(.doc)) div.toc dd dt:before {
  content: "";
  position: absolute;
  left: var(--leftbar-paddings-leftbar-padding-2xs);
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--border-border-secondary, #d5d7d9);
}

.boostlook .nav-list li[data-depth]:not([data-depth="1"]):hover::before,
.boostlook #toc > ul.sectlevel1 li:not(:has(> ul)):hover::before,
.boostlook:not(:has(.doc)) div.toc dd dt:hover:before {
  background-color: var(--border-border-blue-hover, #329cd2);
  isolation: isolate;
  z-index: 1;
}

/* Navigation Menu Title */
.boostlook #toc #toctitle,
.boostlook .nav-menu h3.title {
  padding: var(--leftbar-paddings-leftbar-padding-3xs, 0.25rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  font-weight: 600;
}

/* TOC code in links */
.boostlook #toc a code,
.boostlook:not(:has(.doc)) div.toc a code {
  /* slightly reduce code elements font size in side menu */
  font-size: 0.96em;
  display: inline;
  background: none !important;
  padding: 0;
  border: none;
  color: inherit;
  transition: none;
}

/* Content */
.boostlook #content .doc,
.boostlook #content > .sect1,
.boostlook #header > *,
.boostlook #footer > * {
  max-width: var(--main-content-width);
  margin: 0 auto;
}

.boostlook #preamble + .sect1,
.boostlook .doc .sect1 + .sect1 {
  margin-top: revert;
}

html:not(.is-clipped--nav):has(.boostlook) div#content {
  display: block;
  visibility: visible;
}

html.is-clipped--nav:has(.boostlook) div#content {
  display: none;
  visibility: hidden;
}

/* Responsive Design */
@media screen and (min-width: 768px) {
  .article.toc2.toc-left {
    padding: 0 1rem 0 1rem;
  }

  .boostlook #toggle-toc {
    visibility: visible;
    height: auto;
    width: auto;
  }

  .boostlook #toc.toc2 {
    position: fixed;
    width: var(--main-max-width-leftbar);
    left: max(1rem, 50% - 45rem);
    top: 0;
    z-index: 1000;
    height: 100vh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--border-border-primary, #e4e7ea);
    visibility: visible;
  }

  .boostlook #toc.toc2:not(.nav-container) {
    padding: 1rem 1.5rem;
  }

  .boostlook #toc.toc2:not(.nav-container):has(#toggle-toc) {
    /* Extra left padding if toc toggle exists */
    padding: 1rem 1.5rem 1rem 2.2rem;
  }

  .toc2 .boostlook {
    margin-left: var(--main-max-width-leftbar);
  }

  /* TOC Toggle Button */
  .boostlook #toggle-toc {
    position: fixed;
    top: 2rem;
    left: max(1rem, 50% - 39rem - 1rem);
    background-color: var(--surface-background-main-base-primary);
    box-shadow: 0 0px 3px var(--surface-background-main-surface-transparent-inverse);
    border: 0;
    padding: 0;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M400-240l240-240-240-240-56%2056%20184%20184-184%20184%2056%2056Z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1rem;
    height: 2rem;
    width: 2rem;
    text-indent: -9999px;
    z-index: 1001;
  }

  /* Hidden TOC */
  html.toc-hidden .boostlook {
    margin-left: 0;
  }

  html.toc-hidden .boostlook #toggle-toc {
    left: max(2px, 50% - 45rem - 1rem);
  }

  /* Visible TOC */
  html.toc-visible .boostlook #toggle-toc {
    left: max(2px, 50% - 45rem - 1rem);
    background-color: var(--surface-background-main-base-primary);
  }

  html.toc-visible .boostlook {
    margin-left: 0;
  }

  html.toc-hidden .boostlook #toc.toc2 {
    visibility: hidden;
  }

  html.toc-visible #toc.toc2 {
    opacity: 1;
    visibility: visible;
    /* width: 250px;
    padding-left: 1.5rem; */
  }

  /* TOC Shadow States */
  html.toc-visible:not(.toc-pinned) #toc.toc2 {
    box-shadow: 4px 0 12px 0px rgba(0, 0, 0, 0.1);
  }

  /* TOC Pin States */
  html.toc-visible.toc-pinned #toggle-toc {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M560-240%20320-480l240-240%2056%2056-184%20184%20184%20184-56%2056Z%22%2F%3E%3C%2Fsvg%3E");
  }

  html.toc-visible.toc-pinned .boostlook {
    margin-left: var(--main-max-width-leftbar);
  }
}
/* TOC Common End */

/*----------------- Styles specific to AsciiDoctor content start -----------------*/

/**
 * AsciiDoctor-Specific Styles
 * Styles that apply specifically to content generated by AsciiDoctor.
 * These styles handle:
 * 1. Article layout and structure
 * 2. Table of contents (TOC) styling
 * 3. Content formatting
 * 4. Responsive design adjustments
 */

/* Header Adjustments */
.boostlook #header > h1 {
  margin-top: 0;
}

.boostlook #header .author {
  display: inline-block;
  margin-top: var(--padding-padding-md, 1.125rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-lg, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-xl, 1.75rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Rouge Syntax Highlighting */
/* Light theme Rouge syntax highlighting */
.boostlook pre.rouge .k { /* Keywords like const, auto */
  color: var(--atom-one-light-keyword, #a626a4);
}
.boostlook pre.rouge .kt { /* Types like char, int */
  color: var(--atom-one-light-keyword, #a626a4);
}
.boostlook pre.rouge .n,
.boostlook pre.rouge .nf { /* Names, identifiers, functions */
  color: var(--atom-one-light-text, #383a42);
}
.boostlook pre.rouge .o { /* Operators */
  color: var(--atom-one-light-operator, #e45649);
}
.boostlook pre.rouge .s,
.boostlook pre.rouge .s1,
.boostlook pre.rouge .s2 { /* Strings */
  color: var(--atom-one-light-string, #50a14f);
}
.boostlook pre.rouge .mi,
.boostlook pre.rouge .mf { /* Numbers */
  color: var(--atom-one-light-variable, #986801);
}
.boostlook pre.rouge .p { /* Punctuation */
  color: var(--atom-one-light-text, #383a42);
}
.boostlook pre.rouge .c,
.boostlook pre.rouge .c1,
.boostlook pre.rouge .cm { /* Comments */
  color: var(--atom-one-light-comment, #a0a1a7);
  font-style: italic;
}

/* Dark theme Rouge syntax highlighting */
html.dark .boostlook pre.rouge .k,
html.dark .boostlook pre.rouge .kt {
  color: var(--atom-one-dark-keyword, #c678dd);
}
html.dark .boostlook pre.rouge .n,
html.dark .boostlook pre.rouge .nf {
  color: var(--atom-one-dark-text, #abb2bf);
}
html.dark .boostlook pre.rouge .o {
  color: var(--atom-one-dark-operator, #e06c75);
}
html.dark .boostlook pre.rouge .s,
html.dark .boostlook pre.rouge .s1,
html.dark .boostlook pre.rouge .s2 {
  color: var(--atom-one-dark-string, #98c379);
}
html.dark .boostlook pre.rouge .mi,
html.dark .boostlook pre.rouge .mf {
  color: var(--atom-one-dark-variable, #d19a66);
}
html.dark .boostlook pre.rouge .p {
  color: var(--atom-one-dark-text, #abb2bf);
}
html.dark .boostlook pre.rouge .c,
html.dark .boostlook pre.rouge .c1,
html.dark .boostlook pre.rouge .cm {
  color: var(--atom-one-dark-comment, #5c6370);
  font-style: italic;
}

.boostlook pre.rouge .o {
  font-weight: 400;
}

.boostlook pre.rouge code span {
  font-style: normal;
}

/*----------------- Styles specific to AsciiDoctor content end -----------------*/

/*----------------- Styles specific to Antora Templates start -----------------*/

/**
 * Antora Template Styles
 * Specific styles for Antora-generated documentation.
 * These styles handle:
 * 1. Header and navigation layout
 * 2. Typography customization
 * 3. Navigation menu structure
 * 4. Content layout and formatting
 * 5. Responsive design adaptations
 */

/* Table of Contents */
.boostlook .nav {
  height: 100%;
  padding: var(--spacing-size-sm, 1rem) var(--spacing-size-lg, 1.5rem);
  position: static;
  background-color: unset;
  box-shadow: none;
  height: auto;
  overflow-y: auto;
}

/* Toc Navigation */
.boostlook #toc .nav-menu h3.title a {
  color: inherit;
  font: inherit;
}

.boostlook #toc .nav-menu h3.title a:focus,
.boostlook #toc .nav-menu h3.title a:hover {
  color: var(--text-main-text-link-blue-secondary, #0284c7);
}

/* Navigation Menu */
.boostlook .nav-panel-menu {
  overflow: visible;
}

.boostlook .nav-close {
  display: none;
}

.boostlook .nav-menu > .nav-list > .nav-list {
  margin-left: 0;
}

.boostlook .nav-list li[data-depth="1"].is-current-page.is-active {
  padding-left: 1.375rem;
}

.boostlook .nav-list li[data-depth="1"].is-current-page.is-active::before {
  content: "";
  position: absolute;
  width: 0.125rem;
  height: 0.125rem;
  border-radius: 2rem;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--surface-icons-icon-blue, #026a9f);
}

.boostlook .nav-list li[data-depth]:not([data-depth="1"]).is-current-page.is-active::before {
  background-color: var(--text-main-text-primary, #18191b);
}

/* Active Page Indicator */
.boostlook .nav-list .is-current-page.is-active {
  position: relative;
  border-radius: var(--padding-padding-3xs, 0.25rem);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

.boostlook #toc .nav-list .is-current-page.is-active > .nav-link {
  font-weight: 400;
  color: var(--text-main-text-primary, #18191b);
}

/* Header Layout */
.boostlook #header:has(.nav-container) {
  padding: 0;
}

/* Typography */
.boostlook .doc,
.boostlook .doc i {
  font: inherit;
}
.boostlook .doc i {
  color: inherit;
}

/* TOC Container */
.boostlook #toc.toc2.nav-container {
  position: fixed;
}

.boostlook #toc.toc2.nav-container.is-active {
  position: static;
  height: 100vh;
  padding: 0;
  overflow-y: auto;
}

/* Nav Toggle */
.boostlook #content .nav-toggle {
  display: flex;
  padding: var(--spacing-size-3xs, 0.25rem);
  align-items: center;
  border: none;
  border-radius: var(--spacing-size-2xs, 0.5rem);
  outline: none;
  line-height: inherit;
  height: unset;
  width: unset;
  margin-right: var(--padding-padding-xs, 0.5rem);

  background: var(--surface-background-main-base-primary, #fff);
  background-size: auto;
  background-position-x: auto;
}

.boostlook #content .nav-toggle:before {
  content: var(--icon-menu);
  line-height: 0;
}

@media screen and (min-width: 768px) {
  .boostlook #content .nav-toggle {
    display: none;
    visibility: hidden;
  }
}

/* Layout */
.boostlook .article .content {
  gap: 1rem;
}

.boostlook #content:has(.toc.sidebar) {
  display: flex;
}

.boostlook #footer:has(> script):not(:has(> div)) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Toolbar */
.boostlook .toolbar {
  position: static;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-padding-md, 1.125rem) 0;
  color: var(--text-main-text-body-tetriary, #62676b);
  background-color: transparent;
  box-shadow: unset;
}

.boostlook .toolbar + h1 {
  margin-top: 0;
}

/* Breadcrumbs */
.boostlook .breadcrumbs {
  display: block;
  flex: 1 1;
  padding: 0;
  font-size: inherit;
  line-height: revert;
  overflow: auto;
  scrollbar-width: none;
  margin-right: var(--spacing-size-3xs);
}

.boostlook .breadcrumbs::-webkit-scrollbar {
  display: none;
}

.boostlook .breadcrumbs ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook .breadcrumbs ul li {
  font: inherit;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .boostlook .breadcrumbs ul li:not(:first-child):not(:last-child) {
    display: none;
  }
}

.boostlook .breadcrumbs ul li a {
  font: inherit;
  color: var(--text-main-text-link-blue-secondary, #0284c7);
  text-decoration: none;
  position: relative;
}

.boostlook .breadcrumbs ul li a:hover {
  text-decoration: underline;
}

.boostlook .breadcrumbs ul li:first-of-type {
  display: flex;
  align-items: center;
  padding: var(--spacing-size-3xs, 0.25rem);
  margin-right: var(--padding-padding-xs, 0.75rem);
  gap: var(--spacing-size-2xs, 0.5rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  border: 1px solid var(--border-border-primary, #e4e7ea);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
}

.boostlook .breadcrumbs ul li:first-of-type::after {
  content: none;
}

.boostlook .breadcrumbs ul li:first-of-type a {
  display: flex;
  align-items: center;
  gap: var(--spacing-size-3xs, 0.25rem);
  line-height: 0;
  color: var(--text-main-text-primary, #18191b);
  text-decoration: none;
}

.boostlook .breadcrumbs ul li::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  flex-grow: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--surface-icons-icon-tetriary, #949a9e);
  padding: 0;
  margin: 0 var(--spacing-size-2xs, 0.5rem);
}

.boostlook .breadcrumbs ul li:first-of-type::after,
.boostlook .breadcrumbs ul li:last-of-type::after {
  content: none;
}

.boostlook .breadcrumbs ul li:first-of-type a svg {
  display: none;
}

.boostlook .breadcrumbs ul li:first-of-type a::before {
  content: var(--icon-home);
}

/* Spirit Navigation */
.boostlook .toolbar .spirit-nav,
.boostlook:not(:has(.doc)) .spirit-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.boostlook:not(:has(.doc)) .spirit-nav {
  padding-top: var(--padding-padding-md, 1.125rem);
  justify-content: flex-end;
}

.boostlook .toolbar .spirit-nav a,
.boostlook:not(:has(.doc)) .spirit-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-size-2xs, 0.5rem);
  border-radius: var(--spacing-size-2xs, 0.5rem);
  /* border: 1px solid var(--border-border-primary, #e4e7ea); */
  /* background: var(--surface-background-main-base-primary, #fff); */
  width: 32px;
  height: 32px;
  text-decoration: none;
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
}

.boostlook .toolbar .spirit-nav a:hover,
.boostlook:not(:has(.doc)) .spirit-nav a:hover {
  border: 1px solid var(--border-border-blue, #92cbe9);
  background: var(--surface-background-main-surface-blue-secondary, #daeef9);
}

.boostlook .toolbar .spirit-nav a span {
  overflow: hidden;
  position: relative;
}

.boostlook:not(:has(.doc)) .spirit-nav a img {
  display: none;
  border-width: 0px;
}

/* hide default icons if elemnts exists */
.boostlook .toolbar .spirit-nav a span[title*="Previous"],
.boostlook .toolbar .spirit-nav a span[title*="Next"],
.boostlook .toolbar .spirit-nav a span[title*="Up"] {
  color: transparent;
  display: block;
  width: 100%;
  height: 100%;
}

.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey]::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

.boostlook .toolbar .spirit-nav a span[title*="Previous"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="p"]::after {
  content: var(--icon-arrow-left);
}
.boostlook .toolbar .spirit-nav a span[title*="Next"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="n"]::after {
  content: var(--icon-arrow-right);
}
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
  content: var(--icon-arrow-up);
}
.boostlook .toolbar .spirit-nav a span[title*="Up"]::after,
.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="u"]::after {
  content: var(--icon-arrow-up);
}

.boostlook:not(:has(.doc)) .spirit-nav a[accesskey="h"]::after {
  content: var(--icon-home);
}

/* Tabs Elements */
.boostlook .tabs .tabpanel {
  border: revert;
  padding: var(--padding-padding-xs, 0.75rem) 0;
  background: transparent;
}

.boostlook .tablist,
.boostlook .tabs .tabpanel {
  border-bottom: 1px solid var(--border-border-primary, #e4e7ea);
}

.boostlook .tablist > ul .tab {
  position: relative;
  display: flex;
  padding: var(--padding-padding-2xs, 0.5rem) var(--padding-padding-md, 1.125rem);
  justify-content: center;
  align-items: center;
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-weight: 400;
  line-height: var(--typography-line-height-md, 1.25rem); /* 142.857% */
  cursor: pointer;
  border: none;
  background: transparent;
}

.boostlook .tabs.is-loading .tablist li:first-child::after,
.boostlook .tabs:not(.is-loading) .tablist li.is-selected::after {
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--text-main-text-primary, #18191b);
}

.boostlook .tablist > ul .tab * {
  color: inherit;
}

.boostlook .tablist > ul .tab.is-selected,
.boostlook .tablist > ul .tab:hover {
  color: var(--text-main-text-primary, #18191b);
}

.boostlook .tablist.ulist > ul li + li {
  margin-left: unset;
}

.boostlook .tabs:not(.is-loading) .tablist .tab:not(.is-selected) {
  background-color: transparent;
}

/*----------------- Styles specific to Antora Templates end -----------------*/

/*---------- Quickbook docs styling fixes -----------*/

/**
 * Quickbook Documentation Styles
 * Comprehensive styling for Quickbook-generated documentation, including:
 * 1. Typography and heading hierarchy
 * 2. Content blocks and spacing
 * 3. Navigation and spirit-nav elements
 * 4. Special elements (notes, tips, etc.)
 * 5. Code and syntax highlighting
 */

#boost-legacy-docs-wrapper:has(> .boostlook),
#antora-template-wrapper:has(> .boostlook),
div.source-docs-antora.boostlook:has(> .boostlook) {
  /* CharConv template fix */
  margin: auto;
}

/* Legacy boostlook container */
.boostlook#boost-legacy-docs-wrapper,
.boostlook#antora-template-wrapper,
div.source-docs-antora.boostlook {
  margin-top: 0;
  max-width: unset;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
}

.boostlook#boost-legacy-docs-wrapper > #header,
.boostlook#boost-legacy-docs-wrapper > #content,
.boostlook#boost-legacy-docs-wrapper > #footer,
.boostlook#boost-legacy-docs-wrapper > #footnotes,
.boostlook#antora-template-wrapper > #header,
.boostlook#antora-template-wrapper > #content,
.boostlook#antora-template-wrapper > #footer,
.boostlook#antora-template-wrapper > #footnotes,
div.source-docs-antora.boostlook > #header,
div.source-docs-antora.boostlook > #content,
div.source-docs-antora.boostlook > #footer,
div.source-docs-antora.boostlook > #footnotes {
  /* width: auto;
  max-width: unset;
  margin-left: auto; */
  padding-left: unset;
  padding-right: unset;
}

/* Add Side margin for legacy boostlook container */
#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) {
  padding: 0 var(--main-margin, 3rem);
}

/* Title Block Common */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type {
  margin-bottom: var(--padding-padding-md, 1.125rem);
}

/* Title Styles */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .title,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .title {
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-2xl, 1.75rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-3xl, 2.5rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  margin: 0;
}

/* Title Author */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .author,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .author,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .author,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .author {
  margin: 0;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-lg, 1.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-xl, 1.75rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Top margin for first Author in title */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div.author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div.author,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.author,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.author,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content div.author {
  margin-top: var(--padding-padding-md, 1.125rem);
}

/* Reduce top margin for next authors in authors group */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .authorgroup div.author:not(:first-child),
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .authorgroup div.author:not(:first-child) {
  margin-top: var(--padding-padding-2xs);
}

/* Remove Top Margin for next .copyright  */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(div.author) + div:has(div.author) .author {
  margin-top: var(--padding-padding-3xs);
}

/* Title Copyright */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .copyright,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .copyright,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .copyright,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .copyright,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .copyright {
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem);
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

/* Remove Top Margin for next .copyright  */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type div:has(.copyright) + div:has(.copyright) .copyright {
  margin-top: 0;
}

/* Title Legalnotice */
.boostlook:not(:has(.doc)) > .section > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .document > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .refentry > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .chapter > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .book > .titlepage:first-of-type .legalnotice,
.boostlook:not(:has(.doc)) > .article > .titlepage:first-of-type .legalnotice,
/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(>.boostlook)) > #content .legalnotice {
  color: var(--text-main-text-body-primary, #2a2c30);
  font-size: var(--typography-font-size-sm, 1rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-lg, 1.5rem);
  margin-top: var(--padding-padding-2xs, 0.5rem);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .legalnotice,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .legalnotice,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .legalnotice {
  margin-bottom: var(--padding-padding-md, 1.125rem);
}

/* Remove <hr/>s  */
.boostlook:not(:has(.doc)) .titlepage hr {
  display: none;
}

/* Table of Contents */
.boostlook:not(:has(.doc)) div.toc {
  color: var(--text-main-text-body-secondary, #494d50);
  font-family: var(--font-family-body, "Noto Sans");
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-md, 1.25rem);
  margin: 0;
  margin-bottom: var(--padding-padding-md, 1.125rem);
  padding: 0;
  border: none;
}

.boostlook:not(:has(.doc)) div.toc > p {
  display: flex;
  padding: var(--spacing-size-3xs, 0.25rem);
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--typography-font-size-2xs, 0.75rem);
  font-weight: 600;
  line-height: var(--typography-line-height-sm, 1rem); /* 133.333% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

.boostlook:not(:has(.doc)) div.toc > p > * {
  font: inherit;
  color: inherit;
}

.boostlook:not(:has(.doc)) div.toc .toc dt {
  color: var(--text-main-text-body-secondary, #494d50);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typography-line-height-md, 1.25rem);
}

.boostlook:not(:has(.doc)) div.toc dd dd {
  padding-left: var(--leftbar-paddings-leftbar-padding-sm);
}

/* Section Layout */
.boostlook#boost-legacy-docs-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
.boostlook#antora-template-wrapper:not(:has(.doc)):not(:has(> .boostlook)) > *,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > * {
  max-width: var(--main-content-width);
  /* margin-left: inherit;
  margin-right: inherit; */
  margin: 0 auto;
}

/* hide footer spirit nav since it wasn't visible before */
.boostlook:not(:has(.doc)) div:nth-of-type(4).spirit-nav,
.boostlook#boost-legacy-docs-wrapper div.spirit-nav:last-child,
.boostlook#antora-template-wrapper div.spirit-nav:last-child,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) div.spirit-nav:last-child {
  display: none !important;
}

/* hidden elems */
.boostlook:not(:has(.doc)) > hr,
.boostlook:not(:has(.doc)) .table-break {
  display: none;
}

/* Content Blocks */
.boostlook:not(:has(.doc)) .inlinemediaobject:has(> img):first-child:last-child {
  margin: var(--padding-padding-xs, 0.75rem) 0;
}

.boostlook:not(:has(.doc)) a:is(h1 a, h2 a, h3 a, h4 a, h5 a) code {
  background: transparent !important;
  border: none;
  font-size: inherit;
  color: inherit;
  padding: 0;
  display: initial;
  transition: none;
}

/* Special Blocks */
/* hide legacy icon */
.boostlook:not(:has(.doc)) div:not(.admonitionblock).note > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).tip > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).important > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).caution > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).warning > table tr:first-child td,
.boostlook:not(:has(.doc)) div:not(.admonitionblock).blurb > table tr:first-child td,
.boostlook:not(:has(.doc)) p.blurb > table tr:first-child td {
  display: none;
}

/* Special Blocks Margins */
.boostlook:not(:has(.doc)) div.note,
.boostlook:not(:has(.doc)) div.tip,
.boostlook:not(:has(.doc)) div.important,
.boostlook:not(:has(.doc)) div.caution,
.boostlook:not(:has(.doc)) div.warning,
.boostlook:not(:has(.doc)) div.blurb,
.boostlook:not(:has(.doc)) p.blurb {
  margin-top: var(--padding-padding-xs, 0.75rem);
  margin-bottom: var(--padding-padding-2xs);
}

.boostlook:not(:has(.doc)) .titlepage + div.note,
.boostlook:not(:has(.doc)) .titlepage + div.tip,
.boostlook:not(:has(.doc)) .titlepage + div.important,
.boostlook:not(:has(.doc)) .titlepage + div.caution,
.boostlook:not(:has(.doc)) .titlepage + div.warning,
.boostlook:not(:has(.doc)) .titlepage + div.blurb,
.boostlook:not(:has(.doc)) .titlepage + p.blurb {
  margin-top: var(--padding-padding-2xs);
}

/* Tables */
/* Make div with Table display block */
.boostlook:has(:not(.doc)) div.table {
  display: block;
}

/* Enable Horizontal Scroll */
.boostlook:has(:not(.doc)) div.table .table-contents,
.boostlook:has(:not(.doc)) .informaltable:has(> .table) {
  overflow: auto;
}

/* References Table */
/* This is specific selector for refences tables which containes many tables and only tables as direct children */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) {
  display: flex;
  flex-direction: column;
  gap: var(--padding-padding-md, 1.125rem);
  /* border: 2px solid red; */
}

/* Disable margins for all Headings inside table */
.boostlook:has(:not(.doc)) .informaltable:has(> .table) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
}

/* Table has inner table th  */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) th {
  border: none;
  padding: 0 0 var(--padding-padding-xs, 0.75rem) 0;
  background: none;
  color: var(--text-main-text-primary, #18191b);
  font-size: var(--Typography-font-size-md, 1.125rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-xl, 1.75rem); /* 155.556% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Disable global cell paddings */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) > tbody > tr > td {
  padding: 0;
}

/* Add border radius to tbody first row */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:first-child {
  border-top-left-radius: var(--spacing-size-2xs, 0.5rem);
  overflow: hidden;
}

/* Add border radius to tbody first row */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tr:last-child td:last-child {
  border-top-right-radius: var(--spacing-size-2xs, 0.5rem);
  overflow: hidden;
}

/* Select Inner Headings and make it look as table head */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) .table:has(.simplelist) tbody :is(h1, h2, h3, h4, h5, h6) {
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
  gap: var(--spacing-size-xs, 0.75rem);
  background: var(--surface-background-main-surface-primary, #f5f6f8);
  color: var(--text-main-text-body-tetriary, #62676b);
  font-size: var(--typography-font-size-xs, 0.875rem);
  font-style: normal;
  font-weight: 500;
  line-height: var(--typography-line-height-lg, 1.5rem); /* 171.429% */
  letter-spacing: var(--spacing-size-size-0, 0rem);
}

/* Inner table styles */
.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist {
  width: 100%;
}

.boostlook:has(:not(.doc)) .informaltable:has(> table:nth-of-type(2)):not(:has(> *:not(table))) table.simplelist td {
  border: none;
  padding: var(--padding-padding-3xs, 0.25rem) var(--padding-padding-2xs, 0.5rem);
}

/* Footnotes */
.boostlook:has(:not(.doc)) .footnotes {
  margin-top: var(--padding-padding-lg);
  border-top: 1px solid var(--border-border-primary);
}

.boostlook:has(:not(.doc)) .footnotes hr {
  display: none;
}

/* Copyright Footer */
/* If Footer has no content than use it as bottom spacer */
.boostlook .copyright-footer:empty {
  padding-top: var(--main-margin);
}

/* If Footer has content */
.boostlook .copyright-footer:not(:empty) {
  padding: var(--padding-padding-lg) 0;
}

/* Footer Content */
.boostlook:not(:has(.doc)) .copyright-footer {
  color: var(--text-main-text-body-quaternary, #949a9e);
  font-size: var(--typography-font-size-xs);
  font-weight: 500;
  line-height: var(--typography-line-height-sm, 1rem);
  letter-spacing: var(--spacing-size-size-0, 0rem);
  text-align: left;
}

/* Footer Content  */
.boostlook:not(:has(.doc)) .copyright-footer p {
  text-align: inherit;
  font-size: var(--typography-font-size-2xs);
  color: var(--text-main-text-body-primary, #2a2c30);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content hr,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content hr,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content hr {
  display: none;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet {
  position: relative;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) {
  margin: 0;
  border: none;
  padding: 0;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.highlight:has(> pre) pre,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.highlight:has(> pre) pre,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.highlight:has(> pre) pre {
  padding: var(--spacing-size-xs, 0.75rem) var(--spacing-size-sm, 1rem);
  margin-top: var(--padding-padding-3xs, 0.25rem);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]) {
  margin-left: 0;
  margin-right: 0;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:has(pre):not(:last-child) pre:not([class]),
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content > pre:not([class]):not(:last-child),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content > pre:not([class]):not(:last-child),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content > pre:not([class]):not(:last-child),
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content div.code-snippet:not(:last-child) pre,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content div.code-snippet:not(:last-child) pre,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content div.code-snippet:not(:last-child) pre {
  margin-bottom: var(--padding-padding-xs, 0.75rem);
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content + p:has(> small),
.boostlook:not(:has(.doc))#antora-template-wrapper > #content + p:has(> small),
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content + p:has(> small) {
  padding: var(--padding-padding-lg) 0 !important;
}

/* Outcome 2.2 Weird Template fix */
.boostlook:not(:has(.doc))#boost-legacy-docs-wrapper > #content .footnotes,
.boostlook:not(:has(.doc))#antora-template-wrapper > #content .footnotes,
div.source-docs-antora.boostlook:not(:has(.doc)):not(:has(> .boostlook)) > #content .footnotes {
  padding-top: var(--padding-padding-xs, 0.75rem);
}

@media screen and (min-width: 768px) {
  body.article:has(.boostlook#boost-legacy-docs-wrapper),
  body.article:has(.boostlook#antora-template-wrapper),
  body.article:has(div.source-docs-antora.boostlook) {
    /* !important ovverides website own styles !important
    * Adjust this to "padding: 0 1rem 0 1rem"
    * when website container width will be used as in new look design
    */
    padding: 0 !important;
  }

  #boost-legacy-docs-wrapper .boostlook #toc.toc2,
  #antora-template-wrapper .boostlook #toc.toc2,
  div.source-docs-antora.boostlook:has(> .boostlook) .boostlook #toc.toc2 {
    /* Adjust this to "max(1rem, 50% - 45rem)"
    * when website container width will be used as in new look design
    */
    left: max(0rem, 50% - 45rem);
  }
}

/*----------------- Quickbook Documentation Styles end -----------------*/

/*----------------- Library README Styles start -----------------*/

.boostlook#libraryReadMe {
  margin-left: 0;
}

.boostlook#libraryReadMe > * {
  max-width: unset;
  margin-left: inherit;
  margin-right: inherit;
}

.boostlook#libraryReadMe > h1:first-child {
  margin-top: 0;
}

.boostlook#libraryReadMe div.highlight:has(> pre) {
  background: transparent !important;
}

/*----------------- Library README Styles end -----------------*/
